@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap');

:root {
  --left-width: 200px;
  --page-pad: 50px;
  --content-pad: 56px;
  --accent: #0000FF;
  --muted: #666;
  --font: "Pixelify Sans", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  font-family: var(--font);
  font-weight: 400;
  color: #000;
  line-height: 1.3;
  background-color: #fff;
  background-image: url("%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20.785'%20height='36.0'%3E%3Cpolygon%20points='20.785,3.000%2020.785,15.000%2010.393,21.000%200.001,15.000%200.001,3.000%2010.393,-3.000'%20fill='white'%20stroke='%20%20%2523e0e0e0'%20stroke-width='0.8'/%3E%3C/svg%3E"), url("%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20.785'%20height='36.0'%3E%3Cpolygon%20points='20.785,3.000%2020.785,15.000%2010.393,21.000%200.001,15.000%200.001,3.000%2010.393,-3.000'%20fill='white'%20stroke='%20%20%2523e0e0e0'%20stroke-width='0.8'/%3E%3C/svg%3E");
  background-size: 20.785px 36.0px, 20.785px 36.0px;
  background-position: 0 0, 10.393px 18.0px;
  background-repeat: repeat;
  background-attachment: fixed;
}

a { color: var(--accent); }
img { display: block; max-width: 100%; }

/* ── Layout ── */
.container {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--left-width) 1fr;
  position: relative;
}
.container::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: var(--left-width);
  width: 0.5px;
  background: #000;
}

/* ── Sidebar ── */
.left {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: var(--page-pad);
  background: transparent;
  z-index: 10;
}
.brand h1 { font-weight: 700; margin: 0; line-height: 1; }
.brand h1 a { color: #000; text-decoration: none; }
.left-nav { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.left-nav a {
  display: block; font-size: 1.1rem; font-weight: 400;
  text-decoration: none; color: #000; padding: 3px 0;
}
.left-nav a:hover  { color: var(--accent); }
.left-nav a.active { color: var(--accent); }

/* ── Main shared ── */
.main-content { padding: var(--content-pad); min-height: 100vh; }
.page-title   { font-size: 1.5rem; font-weight: 700; margin: 0 0 32px 0; }

/* ── Home ── */
.home-center {
  min-height: 100vh; display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start; gap: 12px; padding: var(--content-pad);
}
.home-center img { width: 65px; height: 65px; }
.home-center p   { margin: 0; font-size: 1rem; }

/* ── Paper ── */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 32px; }
.card { text-decoration: none; color: #000; display: block; }
.card:hover .card-title { color: var(--accent); }
.card-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: #e0e0e0; display: block; }
.card-img-placeholder {
  width: 100%; aspect-ratio: 4/3; background: #e0e0e0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; color: var(--muted); border: 1px dashed #bbb;
}
.card-body  { padding: 8px 0 0; }
.card-title { font-size: 1rem; font-weight: 700; margin: 0 0 3px; }
.card-sub   { font-size: 0.85rem; color: var(--muted); margin: 0; }

/* ── Paper detail ── */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.detail-images img { width: 100%; margin-bottom: 16px; }
.detail-images .img-placeholder {
  width: 100%; aspect-ratio: 3/4; background: #e0e0e0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; color: var(--muted); border: 1px dashed #bbb; margin-bottom: 16px;
}
.detail-text h1           { font-size: 1.5rem; font-weight: 700; margin: 0 0 8px; }
.detail-text .detail-meta { font-size: 0.85rem; color: var(--muted); margin: 0 0 20px; }
.detail-text p            { font-size: 0.95rem; margin: 0 0 14px; }

/* ── Video ── */
.video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.video-card { text-decoration: none; color: #000; display: block; }
.video-card:hover .video-title { color: var(--accent); }
.video-thumb-wrap { position: relative; width: 100%; padding-bottom: 56.25%; background: #222; overflow: hidden; }
.video-thumb-wrap img { position: absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
.video-thumb-placeholder {
  position: absolute; top:0; left:0; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center; color:#666; font-size:0.8rem; border:1px dashed #555;
}
.video-caption { padding: 10px 0 0; }
.video-caption .video-title { font-size: 0.95rem; font-weight: 700; margin: 0 0 3px; }
.video-caption .video-sub   { font-size: 0.8rem; color: var(--muted); margin: 0; }

/* ── Video detail ── */
.video-detail-embed { position: relative; width: 100%; padding-bottom: 56.25%; background: #222; overflow: hidden; margin-bottom: 28px; }
.video-detail-embed iframe { position: absolute; top:0; left:0; width:100%; height:100%; border:none; }
.video-detail-embed .video-placeholder {
  position: absolute; top:0; left:0; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center; color:#666; font-size:0.85rem; border:1px dashed #555;
}
.video-detail-info h1           { font-size: 1.5rem; font-weight: 700; margin: 0 0 8px; }
.video-detail-info .detail-meta { font-size: 0.85rem; color: var(--muted); margin: 0 0 20px; }
.video-detail-info p            { font-size: 0.95rem; margin: 0 0 14px; }

/* ── Texts ── */
.texts-list { display: flex; flex-direction: column; }
.text-item {
  display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: start;
  padding: 18px 0; border-bottom: 1px solid #ccc; text-decoration: none; color: #000;
}
.text-item:first-child { border-top: 1px solid #ccc; }
.text-item:hover .text-title { color: var(--accent); }
.text-thumb { width: 120px; aspect-ratio: 1; object-fit: cover; background: #e0e0e0; }
.text-thumb-placeholder {
  width: 120px; aspect-ratio: 1; background: #e0e0e0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; color: var(--muted); border: 1px dashed #bbb;
}
.text-body     { padding-top: 4px; }
.text-title    { font-size: 1rem; font-weight: 700; margin: 0 0 5px; }
.text-subtitle { font-size: 0.85rem; color: var(--muted); margin: 0 0 6px; }
.text-date     { font-size: 0.75rem; color: #888; margin: 0; }

/* ── Text detail ── */
.text-detail-header { max-width: 680px; margin-bottom: 32px; }
.text-detail-header h1           { font-size: 1.8rem; font-weight: 700; margin: 0 0 10px; }
.text-detail-header .detail-meta { font-size: 0.85rem; color: var(--muted); margin: 0; }
.text-detail-thumb { width: 100%; max-width: 680px; aspect-ratio: 16/9; object-fit: cover; margin-bottom: 32px; }
.text-detail-thumb-placeholder {
  width: 100%; max-width: 680px; aspect-ratio: 16/9; background: #e0e0e0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; color: var(--muted); border: 1px dashed #bbb; margin-bottom: 32px;
}
.text-detail-body p { max-width: 680px; font-size: 1rem; line-height: 1.7; margin: 0 0 18px; }

/* ── Email ── */
.email-block   { max-width: 480px; }
.email-block p { font-size: 0.95rem; margin: 0 0 16px; }
.email-block a { color: var(--accent); }