/* FLUX ARCHIVE — shared stylesheet */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --black:    #000000;
  --white:    #ffffff;
  --dim:      #888888;
  --faint:    #cccccc;
  --hover-bg: #f5f5f5;
  --code-bg:  #f5f5f5;
  --font:     "Courier New", Courier, monospace;
  --pad:      2.2rem;
}

/* ── Dark mode palette ────────────────────────────────────────── */
html.dark {
  --black:    #d8d8d8;
  --white:    #0d0d0d;
  --dim:      #666666;
  --faint:    #2a2a2a;
  --hover-bg: #191919;
  --code-bg:  #161616;
}
/* Dark overrides for hard-coded rgba colors */
html.dark .day-cell-orig    { background: rgba(13,13,13,0.88); }
html.dark #ar-overlay       { background: rgba(13,13,13,0.94); }
@media (max-width: 900px) {
  html.dark #ar-overlay     { background: rgba(13,13,13,0.96); }
}

html { font-size: 15px; }

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.7;
  color: var(--black);
  background: var(--white);
}

a { color: var(--black); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Issue page: document header ─────────────────────────────── */
.doc-header {
  padding: 1.5rem var(--pad) 1.3rem;
  border-bottom: 2px solid var(--black);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}
.doc-id {
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.05em;
  margin-bottom: 0.3rem;
  line-height: 1.2;
}
.doc-meta-lines {
  font-size: 12px;
  line-height: 1.85;
}
.doc-links {
  text-align: right;
  font-size: 11px;
  line-height: 2.1;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Issue page: section wrapper ─────────────────────────────── */
.s {
  padding: 1.4rem var(--pad);
  border-bottom: 1px solid var(--black);
}
.s-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  display: block;
  margin-bottom: 1.2rem;
}

/* ── Issue page: contact sheet ───────────────────────────────── */
.contact-img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--black);
}

/* ── Issue page: image sequence ──────────────────────────────── */
.seq-body { padding-bottom: 1rem; }

.frame {
  padding: 2.5rem 0 0;
  border-top: 1px solid var(--faint);
}
.frame:first-child { border-top: none; padding-top: 1rem; }

.frame-num {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--faint);
  margin-bottom: 0.6rem;
}
.frame-img-wrap {
  display: flex;
  justify-content: center;
  background: var(--white);
}
.frame-img-wrap a {
  display: flex;
  justify-content: center;
  cursor: zoom-in;
}
.frame-img-wrap a:hover .frame-img { opacity: 0.88; }
.frame-img {
  display: block;
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  transition: opacity 0.15s;
}
.frame-caption {
  margin-top: 0.55rem;
  font-size: 11px;
  color: var(--dim);
  line-height: 1.5;
}

/* ── Issue page: archive record ──────────────────────────────── */
.meta-kv { border-collapse: collapse; width: 100%; }
.meta-kv td { padding: 2px 0; vertical-align: top; }
.meta-kv td:first-child {
  width: 9.5rem;
  color: var(--dim);
  padding-right: 1.5rem;
  white-space: nowrap;
}

/* ── Issue page: frame index ─────────────────────────────────── */
.frame-table { width: 100%; border-collapse: collapse; font-size: 11px; line-height: 1.55; }
.frame-table thead th {
  text-align: left;
  font-weight: normal;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 0 1.8rem 0.5rem 0;
  border-bottom: 1px solid var(--black);
  white-space: nowrap;
}
.frame-table tbody td {
  padding: 1.5px 1.8rem 1.5px 0;
  border-bottom: 1px solid var(--faint);
  white-space: nowrap;
  vertical-align: top;
}
.frame-table tbody tr:hover td { background: var(--hover-bg); }
.frame-table td a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--faint);
}
.frame-table td a:hover { text-decoration-color: var(--black); }
.col-n  { width: 3rem; }
.col-ts { width: 16rem; }

/* ── Issue page: downloads ───────────────────────────────────── */
.dl-list { list-style: none; line-height: 2.2; }
.dl-list a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--faint);
}
.dl-list a:hover { text-decoration-color: var(--black); }
.dl-size { color: var(--dim); margin-left: 0.7rem; }
.dl-na   { color: var(--faint); }

/* ── Issue page: PDF preview ─────────────────────────────────── */
.pdf-section { border-bottom: 1px solid var(--black); }
.pdf-label {
  padding: 0.8rem var(--pad) 0.7rem;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom: 1px solid var(--faint);
}
.pdf-frame { display: block; width: 100%; height: 78vh; border: none; }

/* ── Issue page: navigation ──────────────────────────────────── */
.issue-nav {
  padding: 1.3rem var(--pad);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.nav-disabled { color: var(--faint); user-select: none; }

/* ── Issue page: footer ──────────────────────────────────────── */
.site-footer {
  padding: 1rem var(--pad);
  border-top: 2px solid var(--black);
  font-size: 10px;
  color: var(--dim);
  letter-spacing: 0.04em;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ── Index page: site header ─────────────────────────────────── */
.site-header {
  border-bottom: 2px solid var(--black);
  padding: 1.5rem var(--pad) 1.3rem;
  display: flex;
  align-items: baseline;
  gap: 2rem;
  flex-wrap: wrap;
}
.site-header h1 {
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.08em;
}
.site-header .subtitle { font-size: 12px; color: var(--dim); }

/* ── Index page: toolbar ─────────────────────────────────────── */
.toolbar {
  border-bottom: 1px solid var(--black);
  padding: 0.8rem var(--pad);
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.toolbar-label {
  font-size: 10px;
  color: var(--dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-right: 0.3rem;
}
.btn {
  font-family: var(--font);
  font-size: 11px;
  padding: 2px 8px;
  border: 1px solid var(--faint);
  background: var(--white);
  cursor: pointer;
  letter-spacing: 0.04em;
}
.btn:hover  { border-color: var(--black); }
.btn.active { background: var(--black); color: var(--white); border-color: var(--black); }
.search-box {
  font-family: var(--font);
  font-size: 12px;
  padding: 2px 8px;
  border: 1px solid var(--faint);
  outline: none;
  width: 180px;
  margin-left: auto;
}
.search-box:focus { border-color: var(--black); }

/* ── Index page: grid ────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.2rem;
  padding: 1.4rem var(--pad);
  border-top: 1px solid var(--black);
}

/* ── Index page: pagination ──────────────────────────────────── */
.pagination {
  border-top: 1px solid var(--black);
  padding: 1rem var(--pad);
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.page-info { font-size: 11px; color: var(--dim); margin-left: auto; }
.no-results { padding: 3rem var(--pad); color: var(--dim); font-size: 12px; display: none; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 700px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  :root { --pad: 1rem; }
}

/* ── Archive interface: full-viewport layout ─────────────────── */
body.ar-body {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ar-topbar {
  display: flex;
  align-items: center;
  padding: 0 var(--pad);
  border-bottom: 2px solid var(--black);
  height: 40px;
  flex-shrink: 0;
  gap: 1rem;
  overflow: hidden;
}
.ar-brand {
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.ar-brand-sub {
  font-size: 11px;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ar-search {
  font-family: var(--font);
  font-size: 12px;
  padding: 2px 8px;
  border: 1px solid var(--faint);
  outline: none;
  width: 200px;
  margin-left: auto;
  flex-shrink: 0;
}
.ar-search:focus { border-color: var(--black); }

.ar-main {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.ar-sidebar {
  width: 280px;
  flex-shrink: 0;
  border-right: 1px solid var(--black);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.sb-controls {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--faint);
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
}
.sb-jump {
  font-family: var(--font);
  font-size: 11px;
  padding: 2px 6px;
  border: 1px solid var(--faint);
  outline: none;
  width: 100%;
  margin-top: 3px;
}
.sb-jump:focus { border-color: var(--black); }
.sb-year-row, .sb-month-row, .sb-day-row {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 1px 0.5rem;
}
.sb-year-row { border-bottom: 1px solid var(--faint); }
.sb-month-row { padding-left: 1.4rem; }
.sb-day-row {
  padding-left: 2.8rem;
  cursor: pointer;
}
.sb-day-row:hover { background: var(--hover-bg); }
.sb-toggle {
  font-family: var(--font);
  font-size: 10px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 2px 3px;
  color: var(--dim);
  flex-shrink: 0;
  line-height: 1;
}
.sb-year-label, .sb-month-label, .sb-day-label {
  font-family: var(--font);
  border: none;
  background: none;
  cursor: pointer;
  padding: 2px 0;
  color: var(--black);
  text-align: left;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}
.sb-year-label { font-size: 13px; font-weight: bold; }
.sb-month-label { font-size: 12px; }
.sb-day-label { font-size: 11px; }
.sb-count { font-size: 10px; color: var(--dim); white-space: nowrap; flex-shrink: 0; }
.sb-view-btn {
  font-family: var(--font);
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid var(--faint);
  background: var(--white);
  cursor: pointer;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.sb-view-btn:hover { border-color: var(--black); }
.sb-active { font-weight: bold; }
.sb-day-row.sb-active .sb-day-label { font-weight: bold; }

/* ── Archive panel ───────────────────────────────────────────── */
.ar-panel {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ar-panel-header {
  padding: 0.45rem var(--pad);
  border-bottom: 1px solid var(--faint);
  font-size: 11px;
  color: var(--dim);
  flex-shrink: 0;
}

/* ── Grid view ───────────────────────────────────────────────── */
.ar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 2px;
  padding: 0.6rem var(--pad);
}
.ar-cell { position: relative; background: var(--white); border: 1px solid var(--faint); }
.ar-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: var(--white);
  cursor: zoom-in;
}
.ar-cell > a:first-child:hover .ar-thumb { opacity: 0.85; transition: opacity 0.1s; }
.ar-cell-meta {
  padding: 2px 4px 3px;
  font-size: 10px;
  color: var(--dim);
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
}
.ar-cell-meta a { color: var(--dim); }
.ar-cell-meta a:hover { color: var(--black); }

/* ── List view ───────────────────────────────────────────────── */
.ar-list { padding: 0.4rem 0; }
.ar-list-row {
  display: grid;
  grid-template-columns: 7rem 3.5rem 13rem 1fr auto;
  gap: 0.8rem;
  padding: 3px var(--pad);
  border-bottom: 1px solid var(--faint);
  font-size: 11px;
  align-items: center;
}
.ar-list-row:hover { background: var(--hover-bg); }
.ar-list-issue { color: var(--black); white-space: nowrap; }
.ar-list-ts, .ar-list-idx { color: var(--dim); white-space: nowrap; }
.ar-list-fn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); }
.ar-list-btns { display: flex; gap: 3px; flex-shrink: 0; }
.ar-list-btn {
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border: 1px solid var(--faint);
  background: var(--white);
  color: var(--black);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.ar-list-btn:hover { border-color: var(--black); }

/* ── Sequence view ───────────────────────────────────────────── */
.ar-seq { padding: 0 0 2rem; }

/* ── Timeline: page header ───────────────────────────────────── */
.tl-page-header {
  padding: 1.2rem var(--pad) 1rem;
  border-bottom: 2px solid var(--black);
}
.tl-breadcrumb {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--dim);
  margin-bottom: 0.5rem;
}
.tl-breadcrumb a { color: var(--dim); }
.tl-breadcrumb a:hover { color: var(--black); }
.tl-page-title {
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.06em;
}

/* ── Timeline: summary line ──────────────────────────────────── */
.tl-summary, .tl-year-summary {
  padding: 0.9rem var(--pad) 0.6rem;
  font-size: 11px;
  color: var(--dim);
  border-bottom: 1px solid var(--faint);
}

/* ── Timeline: year/month/day list ───────────────────────────── */
.tl-list {
  list-style: none;
  border-top: 1px solid var(--faint);
}
.tl-row a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.55rem var(--pad);
  border-bottom: 1px solid var(--faint);
  color: var(--black);
  font-size: 12px;
  gap: 1rem;
}
.tl-row a:hover { background: var(--hover-bg); text-decoration: none; }
.tl-row-label { flex-shrink: 0; }
.tl-row-count { color: var(--dim); font-size: 11px; text-align: right; }

/* ── Day page: view toggle ───────────────────────────────────── */
.view-bar {
  padding: 0.8rem var(--pad);
  border-bottom: 1px solid var(--black);
  display: flex;
  gap: 0.5rem;
}

/* ── Day page: thumbnail grid ────────────────────────────────── */
.day-grid-wrap { padding: 1rem var(--pad); }
.day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 3px;
}
.day-cell { position: relative; background: var(--white); border: 1px solid var(--faint); }
.day-cell-link { display: block; }
.day-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: var(--white);
  cursor: zoom-in;
}
.day-cell-link:hover .day-thumb { opacity: 0.88; transition: opacity 0.12s; }
.day-cell-orig {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 10px;
  line-height: 1.5;
  padding: 1px 5px;
  background: rgba(255,255,255,0.88);
  color: var(--black);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.day-cell-orig:hover { background: var(--black); color: var(--white); }


/* ── Day page: sequence view ─────────────────────────────────── */
.day-seq-wrap { padding: 0 0 2rem; }

/* ── Sidebar collapse ────────────────────────────────────────── */
.ar-sidebar { position: relative; transition: width 0.18s; }
.ar-sidebar.sb-collapsed {
  width: 24px;
  min-width: 24px;
  overflow: hidden;
}
.ar-sidebar.sb-collapsed > *:not(.sb-tab) { display: none; }
.sb-tab {
  display: none;
  position: absolute;
  top: 0; left: 0;
  width: 24px;
  height: 100%;
  border: none;
  background: var(--white);
  writing-mode: vertical-rl;
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--dim);
  cursor: pointer;
  text-transform: uppercase;
  text-align: center;
  padding: 0;
}
.sb-tab:hover { color: var(--black); }
.ar-sidebar.sb-collapsed .sb-tab { display: block; line-height: 24px; }
.sb-collapse-btn {
  font-family: var(--font);
  font-size: 11px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 2px 4px;
  color: var(--dim);
  flex-shrink: 0;
  margin-left: auto;
}
.sb-collapse-btn:hover { color: var(--black); }

/* ── Mode toggle ─────────────────────────────────────────────── */
.ar-mode-btns { display: flex; gap: 3px; flex-shrink: 0; }
a.ar-brand { color: var(--black); }
/* Mobile-only elements — hidden on desktop */
#nav-menu-btn  { display: none; }
#nav-menu-drop { display: none; }

/* ── Theme toggle ────────────────────────────────────────────── */
#theme-toggle {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
#theme-toggle button,
#theme-toggle-drop button {
  font-family: var(--font);
  font-size: 11px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 2px 5px;
  color: var(--dim);
  line-height: 1;
  opacity: 0.55;
}
#theme-toggle button:hover,
#theme-toggle-drop button:hover {
  opacity: 1;
  color: var(--black);
}
/* Dropdown row — inside #nav-menu-drop */
#theme-toggle-drop {
  display: flex;
  padding: 10px 16px;
  border-bottom: 1px solid var(--faint);
}

/* ── Publications list panel ─────────────────────────────────── */
.ar-pub-panel {
  flex: 1;
  overflow-y: auto;
  flex-direction: column;
  min-width: 0;
}
.ar-pub-toolbar {
  padding: 0.5rem var(--pad);
  border-bottom: 1px solid var(--faint);
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--dim);
}
.ar-pub-list {
  padding: 0;
  margin: 0;
  list-style: none;
}
.ar-pub-row {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: 0.55rem var(--pad);
  border-bottom: 1px solid var(--faint);
  font-size: 12px;
}
.ar-pub-row:hover { background: var(--hover-bg); }
.ar-pub-id {
  font-weight: bold;
  letter-spacing: 0.05em;
  white-space: nowrap;
  min-width: 7rem;
}
.ar-pub-dates {
  color: var(--dim);
  font-size: 11px;
  white-space: nowrap;
}
.ar-pub-count {
  color: var(--dim);
  font-size: 11px;
  white-space: nowrap;
}
.ar-pub-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}
.ar-pub-act {
  font-size: 10px;
  padding: 2px 7px;
  border: 1px solid var(--faint);
  color: var(--black);
  text-decoration: none;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.ar-pub-act:hover { border-color: var(--black); }

/* ── Start page ──────────────────────────────────────────────── */
body.start-body {
  display: flex;
  align-items: flex-start;
  padding: 5rem var(--pad);
  min-height: 100vh;
}
.start-wrap { max-width: 440px; }
.start-title {
  font-size: 17px;
  font-weight: bold;
  letter-spacing: 0.1em;
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--black);
  padding-bottom: 0.9rem;
}
.start-meta {
  font-size: 12px;
  line-height: 2.5;
  margin-bottom: 2.5rem;
}
.start-meta .lbl { color: var(--dim); }
.start-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.start-btn {
  font-family: var(--font);
  font-size: 12px;
  padding: 6px 18px;
  border: 1px solid var(--black);
  background: var(--white);
  color: var(--black);
  letter-spacing: 0.06em;
  text-decoration: none;
  display: inline-block;
  line-height: 1.6;
}
.start-btn:hover { background: var(--black); color: var(--white); text-decoration: none; }
.start-foot {
  margin-top: 4rem;
  font-size: 10px;
  color: var(--dim);
  letter-spacing: 0.05em;
}
.start-section {
  margin-top: 3rem;
  border-top: 1px solid var(--faint);
  padding-top: 1.2rem;
}
.start-section-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.9rem;
}
.start-body p {
  font-size: 12px;
  line-height: 1.85;
  color: var(--black);
  margin-bottom: 0.5rem;
}
.start-howto-item {
  margin-bottom: 1.3rem;
}
.start-howto-key {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--black);
  display: block;
  margin-bottom: 0.2rem;
}
.start-howto-desc {
  font-size: 12px;
  line-height: 1.8;
  color: var(--dim);
}

/* ── Overlay viewer ──────────────────────────────────────────── */
#ar-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.94);
}
.ar-ov-panel {
  background: var(--white);
  border: 1px solid var(--black);
  width: min(860px, 92vw);
  max-height: 92vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
}
.ar-ov-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0.8rem;
  border-bottom: 1px solid var(--black);
  font-size: 11px;
  color: var(--dim);
  flex-shrink: 0;
}
.ar-ov-close {
  font-family: var(--font);
  font-size: 11px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  color: var(--black);
  letter-spacing: 0.06em;
}
.ar-ov-close:hover { text-decoration: underline; }
.ar-ov-img-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 58vh;
  flex-shrink: 0;
  padding: 1.2rem;
  overflow: hidden;
}
.ar-ov-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  pointer-events: none;
}
/* Invisible left/right tap zones for prev/next navigation */
.ar-ov-tap-prev,
.ar-ov-tap-next {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 45%;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 2;
  padding: 0;
}
.ar-ov-tap-prev { left: 0; }
.ar-ov-tap-next { right: 0; }
.ar-ov-meta {
  padding: 0.6rem 0.8rem 0.4rem;
  border-top: 1px solid var(--faint);
  font-size: 11px;
  line-height: 1.85;
  flex-shrink: 0;
}
.ar-ov-ts { color: var(--dim); }
.ar-ov-issue { margin-top: 0.15rem; }
.ar-ov-issue a { color: var(--black); text-decoration: none; border-bottom: 1px dashed var(--faint); }
.ar-ov-issue a:hover { border-bottom-color: var(--black); }
.ar-ov-view-issue-wrap { margin-top: 0.45rem; }
.ar-ov-view-issue { font-size: 10px; padding: 2px 8px; }
.ar-ov-actions {
  padding: 0.45rem 0.8rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--faint);
  flex-shrink: 0;
}
.ar-ov-nav {
  padding: 0.45rem 0.8rem;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--faint);
  flex-shrink: 0;
}
.ar-ov-nav button:disabled { color: var(--faint); border-color: var(--faint); cursor: default; }

/* ── Back to top ─────────────────────────────────────────────── */
#back-top {
  position: fixed;
  bottom: 1.4rem;
  right: 1.4rem;
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.06em;
  border: 1px solid var(--faint);
  background: var(--white);
  color: var(--dim);
  padding: 4px 9px;
  cursor: pointer;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
#back-top.visible { opacity: 1; pointer-events: auto; }
#back-top:hover { border-color: var(--black); color: var(--black); }

/* ── Overlay info panel ──────────────────────────────────────── */
.ar-ov-info {
  padding: 0.6rem 0.8rem 0.8rem;
  border-top: 1px solid var(--faint);
  flex-shrink: 0;
}
.ar-ov-info-table { border-collapse: collapse; width: 100%; }
.ar-ov-info-key {
  width: 9rem;
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 1.5px 1rem 1.5px 0;
  vertical-align: top;
  white-space: nowrap;
}
.ar-ov-info-val {
  font-size: 10.5px;
  color: var(--black);
  padding: 1.5px 0;
  word-break: break-all;
  line-height: 1.5;
}

/* ── Mobile sidebar backdrop ─────────────────────────────── */
#sb-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 290;
  background: rgba(0,0,0,0.25);
}
#sb-backdrop.visible { display: block; }

/* ── Mobile timeline toggle — injected by JS, styled here ── */
#sb-mobile-toggle {
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: 0.10em;
  border: 1px solid var(--faint);
  background: var(--white);
  cursor: pointer;
  padding: 3px 8px;
  color: var(--dim);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 24px;
  margin-right: 0.4rem;
}
#sb-mobile-toggle:hover { border-color: var(--black); color: var(--black); }

/* ════════════════════════════════════════════════════════════
   MOBILE  ≤ 900 px  (phones portrait + landscape, small tablets)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── Typography ──────────────────────────────────────────── */

  /* ── Topbar: two-row layout ──────────────────────────────── */
  .ar-topbar {
    height: auto;
    padding: 0;
    flex-wrap: wrap;
    gap: 0;
    overflow: visible;
    border-bottom: 2px solid var(--black);
  }
  .ar-brand {
    padding: 0 0.8rem;
    height: 38px;
    display: flex;
    align-items: center;
    flex: 1;
  }
  .ar-brand-sub  { display: none; }
  .ar-search     { display: none; }
  /* Theme toggle: hidden on mobile — moved to #nav-menu-drop */
  #theme-toggle  { display: none; }

  /* Mode buttons: hidden on mobile — replaced by [MENU] dropdown */
  .ar-mode-btns { display: none; }

  /* [MENU] button — shown in the brand row on mobile */
  #nav-menu-btn {
    font-family: var(--font);
    font-size: 10px;
    letter-spacing: 0.10em;
    border: 1px solid var(--faint);
    background: var(--white);
    cursor: pointer;
    padding: 3px 8px;
    color: var(--dim);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 24px;
  }
  #nav-menu-btn:hover { border-color: var(--black); color: var(--black); }

  /* Dropdown panel — slides open below the brand row */
  #nav-menu-drop {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 40px;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 2px solid var(--black);
    z-index: 350;
  }
  #nav-menu-drop.open { display: flex; }
  #nav-menu-drop a {
    font-family: var(--font);
    font-size: 10px;
    letter-spacing: 0.10em;
    padding: 11px 16px;
    border-bottom: 1px solid var(--faint);
    color: var(--black);
    text-decoration: none;
    display: block;
  }
  #nav-menu-drop a:last-child { border-bottom: none; }
  #nav-menu-drop a.active { font-weight: bold; }

  /* ── Sidebar: left-side sidecar — slides in below topbar ─── */
  /* Positioned below the single-row mobile topbar (~40px tall).
     Uses visibility+transform so the slide transition works.
     Content remains visible to the right — not a full takeover. */
  .ar-sidebar,
  .ar-sidebar.sb-collapsed {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 40px;
    left: 0;
    width: 72vw;
    max-width: 260px;
    height: calc(100dvh - 40px);
    z-index: 200;
    overflow-y: auto;
    border-right: 1px solid var(--black);
    background: var(--white);
    /* Off-screen by default — slides in on .mobile-open */
    transform: translateX(-100%);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    visibility: hidden;
    pointer-events: none;
    box-shadow: none;
  }
  .ar-sidebar.mobile-open,
  .ar-sidebar.sb-collapsed.mobile-open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    box-shadow: 4px 0 20px rgba(0,0,0,0.10);
  }
  /* Restore all content inside sidebar regardless of collapse state */
  .ar-sidebar.sb-collapsed > *:not(.sb-tab) { display: block; }
  .sb-tab { display: none !important; }
  .sb-collapse-btn { display: none; }

  /* Backdrop: subtle, below topbar, low opacity — content still present */
  #sb-backdrop {
    top: 40px;
    background: rgba(0,0,0,0.06);
    z-index: 190;
  }

  /* ── Content panel: full width — sidebar is out of flow ─── */
  .ar-main { position: relative; }
  .ar-panel, .ar-pub-panel { width: 100%; box-sizing: border-box; }

  /* ── Grid: 2 columns ─────────────────────────────────────── */
  .ar-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    padding: 3px;
  }
  .ar-cell-meta { font-size: 9.5px; }

  /* ── List view: compact ──────────────────────────────────── */
  .ar-list-row {
    grid-template-columns: 6.5rem 1fr auto;
    gap: 0.4rem;
    padding: 5px 0.75rem;
    font-size: 10px;
  }
  .ar-list-idx,
  .ar-list-ts { display: none; }
  .ar-list-fn { display: none; }
  .ar-list-btns { gap: 2px; }
  .ar-list-btn { font-size: 9px; padding: 3px 5px; }

  /* ── Sequence view ───────────────────────────────────────── */
  .frame { padding: 1.8rem 0 0; }
  .frame-img { max-height: 70vh; }

  /* ── Panel header ────────────────────────────────────────── */
  .ar-panel-header { font-size: 10.5px; padding: 0.35rem 0.75rem; }

  /* ── Overlay: full-screen bottom sheet ───────────────────── */
  #ar-overlay {
    align-items: flex-end;
    background: rgba(255,255,255,0.96);
    padding: 0;
  }
  .ar-ov-panel {
    width: 100vw;
    max-width: 100vw;
    max-height: 96dvh;
    border: none;
    border-top: 2px solid var(--black);
    border-radius: 0;
  }
  .ar-ov-img-wrap { padding: 0; height: 52dvh; }
  .ar-ov-img { max-height: 100%; }
  .ar-ov-meta { padding: 0.4rem 0.75rem 0.3rem; font-size: 10.5px; }
  .ar-ov-actions { padding: 0.35rem 0.75rem; gap: 0.4rem; }
  .ar-ov-nav { padding: 0.35rem 0.75rem; }
  .ar-ov-info { padding: 0.4rem 0.75rem 0.6rem; }
  .ar-ov-info-key { font-size: 9px; padding-right: 0.6rem; width: 7rem; }
  .ar-ov-info-val { font-size: 10px; }
  .ar-ov-topbar { padding: 0.35rem 0.75rem; font-size: 10.5px; }

  /* Swipe hint strip at top of overlay */
  .ar-ov-panel::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--faint);
    border-radius: 2px;
    margin: 8px auto 0;
    flex-shrink: 0;
  }

  /* ── Touch targets ───────────────────────────────────────── */
  .btn { min-height: 30px; }
  .sb-year-row, .sb-month-row, .sb-day-row { padding-top: 4px; padding-bottom: 4px; }
  .sb-year-label, .sb-month-label, .sb-day-label { padding: 4px 0; }

  /* ── Publications rows: stack vertically, no horizontal scroll */
  .ar-pub-list { overflow-x: hidden; }
  .ar-pub-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0.6rem 0.75rem;
  }
  .ar-pub-id    { min-width: auto; font-size: 11px; }
  .ar-pub-dates,
  .ar-pub-count { white-space: normal; font-size: 10.5px; }
  .ar-pub-actions { margin-left: 0; width: 100%; justify-content: flex-start; margin-top: 0.3rem; flex-wrap: wrap; }

  /* ── Back to top ─────────────────────────────────────────── */
  #back-top { bottom: 0.8rem; right: 0.8rem; font-size: 10px; }
}