/* Layout v2: owns page geometry. Legacy styles only provide component details. */
html, body { overflow-x: hidden; }
body { min-height: 100vh; }
.site { display: block !important; width: 100% !important; min-height: 100vh; }
.rail { position: fixed; inset: 0 auto 0 0; width: 74px; height: 100vh; }
.content {
  width: 100% !important;
  box-sizing: border-box;
  max-width: 1280px;
  margin: 0 auto !important;
  padding: 36px 28px 84px 102px !important;
}
.archive-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 310px !important;
  gap: 22px !important;
  align-items: start;
}
.primary-flow { min-width: 0; display: grid; gap: 20px; }
.home-screen { min-width: 0; }
.home-screen { width: 100% !important; height: auto !important; min-height: 0 !important; }
.hero {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
}
.hero-cover {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 205px !important;
  min-height: 205px !important;
}
.hero-body {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 78px minmax(0, 1fr) !important;
  gap: 18px 20px !important;
  align-items: center;
  padding: 28px 30px 30px !important;
}
.avatar-wrap { position: static !important; width: 78px !important; height: 78px !important; margin: 0 !important; }
.identity { min-width: 0; }
.identity h1 { margin: 0 !important; font-size: clamp(30px, 4vw, 48px) !important; line-height: 1.12; overflow-wrap: anywhere; }
.identity-note { grid-column: 1 / -1; max-width: 680px; margin: 0 !important; font-size: 15px; line-height: 1.8; }
.desk-section { height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 24px !important; }
.desk-section .section-head h2 { font-size: 30px !important; line-height: 1.2; }
.desk-column h3 { font-size: 20px !important; }
.desk-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 22px !important; }
.desk-column { min-width: 0; }
.index-card-list { display: grid; gap: 12px; }
.index-empty { margin: 0; padding: 28px 16px; border: 1px dashed var(--line); border-radius: 14px; color: var(--faint); text-align: center; }
.archive-row.index-card,
.project-row.index-card {
  position: relative;
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100%;
  height: 116px !important;
  min-height: 116px !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  overflow: hidden;
  box-sizing: border-box;
}
.index-card-media {
  position: relative;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(190, 224, 244, .78), rgba(247, 217, 228, .82));
  color: #476477;
  font-family: var(--serif);
  font-size: 22px;
}
.index-card-media::before { content: attr(data-initial); }
.index-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.index-card-copy {
  display: grid !important;
  align-content: center;
  gap: 7px;
  min-width: 0;
  padding: 0 58px 12px 0;
  text-align: left;
}
.index-card-copy strong {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.index-card-copy small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.archive-row .index-card-date,
.project-row .index-card-date {
  position: absolute;
  right: 16px;
  bottom: 12px;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1;
}
.hero-body::before,
.hero-body::after,
.identity::before,
.identity::after { display: none !important; content: none !important; }
.archive-aside {
  position: sticky;
  top: 24px;
  display: grid !important;
  gap: 16px !important;
  min-width: 0;
  padding: 0 !important;
  border-left: 0 !important;
}
.archive-aside > * { margin: 0 !important; }
.archive-aside > * { width: 100% !important; min-width: 0 !important; box-sizing: border-box; }
.archive-aside .pinned-minimal,
.archive-aside .echoes,
.archive-aside .quick-search label { width: 100% !important; min-width: 0 !important; }
.quick-search, .pinned-section, .aside-panel { padding: 18px !important; }
.quick-search input { width: 100%; }
.pinned-link { display: block; padding: 14px !important; }
.pinned-link + .pinned-link { margin-top: 10px; }
.echo-list { display: grid; gap: 10px; }
.echo-item { padding: 12px 13px !important; }
.mobile-top { display: none; }

@media (max-width: 980px) {
  .archive-layout { grid-template-columns: minmax(0, 1fr) 280px !important; }
  .desk-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 760px) {
  .rail { display: none !important; }
  .mobile-top { position: sticky; top: 0; z-index: 30; display: flex !important; }
  .content { padding: 14px 12px 64px !important; }
  .archive-layout { grid-template-columns: 1fr !important; gap: 14px !important; }
  .hero-cover { height: 140px !important; min-height: 140px !important; }
  .hero-body { grid-template-columns: 62px minmax(0, 1fr) !important; padding: 20px !important; gap: 14px; }
  .avatar-wrap { width: 62px !important; height: 62px !important; }
  .identity h1 { font-size: clamp(26px, 9vw, 38px) !important; }
  .identity-note { font-size: 14px; }
  .desk-section { padding: 18px !important; }
  .archive-aside { position: static; }
}

/* Spacious personal archive: a broad reading canvas with a calm utility column. */
.rail-mark svg,
.mobile-taste svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.rail-nav .station-link { margin-top: 4px; }
.rail-nav .station-link[data-station-start] { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 8px; }
.taste-rail-button,
.mobile-taste { display: grid !important; place-items: center; }
.avatar-wrap,
.avatar-mark { border-radius: 18px !important; }
.taste-modal {
  width: min(480px, calc(100vw - 32px)) !important;
  max-height: min(620px, 72vh) !important;
  padding: 20px !important;
}
.taste-modal-head h2 { font-size: 26px !important; }
.taste-list { grid-template-columns: 1fr !important; gap: 8px !important; }
.taste-item { margin: 0 !important; padding: 12px 14px !important; }

@media (min-width: 1100px) {
  .rail { width: 82px; }
  .content { max-width: none; margin: 0 !important; padding: 52px 48px 112px 122px !important; }
  .archive-layout { grid-template-columns: minmax(0, 1fr) 350px !important; gap: 40px !important; }
  .primary-flow { gap: 32px; }
  .hero-cover { height: 250px !important; min-height: 250px !important; }
  .hero-body { grid-template-columns: 80px minmax(0, 1fr) !important; gap: 24px 28px !important; padding: 38px 42px 42px !important; }
  .avatar-wrap { width: 80px !important; height: 80px !important; }
  .identity-note { max-width: 760px; font-size: 16px; line-height: 1.9; }
  .desk-section { padding: 32px !important; }
  .desk-grid { gap: 32px !important; }
  .archive-aside { top: 32px; gap: 24px !important; padding-top: 0 !important; }
  .quick-search, .pinned-section, .aside-panel { padding: 24px !important; }
}

:root[data-theme="dark"] .rail,
:root[data-theme="dark"] .mobile-top {
  background: rgba(18, 23, 28, .92) !important;
  border-color: rgba(255, 255, 255, .1) !important;
}
:root[data-theme="dark"] .quick-search,
:root[data-theme="dark"] .quick-search input {
  background: rgba(25, 31, 37, .94) !important;
  color: #ebf2f7 !important;
  border-color: rgba(255, 255, 255, .12) !important;
}
:root[data-theme="dark"] .archive-row.index-card,
:root[data-theme="dark"] .project-row.index-card {
  background: rgba(25, 31, 37, .88) !important;
  border-color: rgba(255, 255, 255, .1) !important;
}
:root[data-theme="dark"] .index-card-media {
  border-color: rgba(255, 255, 255, .12);
  background: linear-gradient(135deg, rgba(58, 91, 111, .9), rgba(91, 60, 73, .9));
  color: #edf3f6;
}

@media (max-width: 760px) {
  .avatar-wrap { width: 64px !important; height: 64px !important; }
  .taste-modal { width: calc(100vw - 24px) !important; max-height: 70vh !important; padding: 18px !important; }
  .archive-row.index-card,
  .project-row.index-card { grid-template-columns: 64px minmax(0, 1fr) !important; height: 104px !important; min-height: 104px !important; gap: 13px !important; padding: 12px 14px !important; }
  .index-card-media { width: 64px; height: 64px; border-radius: 11px; font-size: 19px; }
  .index-card-copy { padding-right: 48px; }
  .index-card-copy strong { font-size: 15px; }
  .archive-row .index-card-date,
  .project-row .index-card-date { right: 14px; bottom: 11px; }
}