/* bookslope Design Guide v1.0 - portable starting point, not yet deployed.
   Resolve html[data-theme] before first paint using the user's choice / OS.
   Site-specific brand colors and layouts belong in the destination site CSS. */
:root {
  color-scheme: light;
  --page-bg: #f5f5f5;
  --header-bg: #fff;
  --surface: #fff;
  --media-bg: #efefef;
  --text-primary: #171717;
  --text-body: #525252;
  --text-secondary: #737373;
  --border: #e5e5e5;
  --link: #525252;
  --font-sans: Inter, system-ui, -apple-system,
    "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --radius-panel: 12px;
  --radius-media: 6px;
  --radius-badge: 3px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --width-site: 1200px;
  --width-reading: 640px;
  --shadow-subtle: 0 1px 2px rgb(0 0 0 / 10%);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: #151515;
  --header-bg: #1a1a1a;
  --surface: #222;
  --media-bg: #303030;
  --text-primary: #ededed;
  --text-body: #c7c7c7;
  --text-secondary: #aaa;
  --border: #444;
  --link: #ddd;
}
/* Small reference components. Adopt explicitly; don't overwrite legacy CSS blindly. */
.media-panel {
  padding: var(--space-6);
  background: var(--media-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-media);
}
.media-panel img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-media);
}
.media-caption {
  margin: var(--space-3) 0 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.7;
  text-align: right;
}
.photo-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}
.photo {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-media);
}
.photo img { display: block; width: 100%; height: auto; }
.photo-info, .photo-location {
  position: absolute;
  left: 18px;
  right: 12px;
  color: #fff; /* Select per-image alternative when contrast is insufficient. */
  line-height: 1.4;
  text-shadow: none;
  pointer-events: none;
}
.photo-info { top: 18px; font-size: 12px; }
.photo-location { bottom: 18px; font-size: 10px; letter-spacing: .04em; }
@media (max-width: 600px) {
  .photo-info, .photo-location { left: 12px; right: 10px; }
  .photo-info { top: 12px; font-size: 10px; }
  .photo-location { bottom: 12px; font-size: 9px; }
}