/* Page-level additions on top of styles.css (the design system, copied verbatim from design/). */
[data-theme="dark"] {
  --color-bg: #131517; --color-surface: #1b1e21; --color-text: #e6e7e8; --color-accent: #7fa6cc;
  --color-divider: color-mix(in srgb, #e6e7e8 16%, transparent);
  --color-accent-100: #1d2d3d; --color-accent-200: #2c455d; --color-accent-600: #94bce3;
  --color-accent-700: #b5d9fd; --color-accent-800: #d6ebff; --color-neutral-100: #2b2b2d; --color-neutral-800: #e7e7ea;
}
body { transition: background .2s, color .2s; }
a { color: var(--color-accent); }
a:hover { color: var(--color-accent-700); }

/* the mockups' style-hover attributes, as classes */
.lnk { color: var(--color-text); text-decoration: none; }
.lnk:hover, .lnk.on { color: var(--color-accent); }
.card-lnk { color: var(--color-text); text-decoration: none; }
.card-lnk:hover { color: var(--color-text); border-color: var(--color-accent); }
.tint:hover { background: var(--color-accent-100); color: var(--color-text); }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.hatch { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--color-text) 7%, transparent) 0 1px, transparent 1px 10px); }
.shot-label { font-family: ui-monospace, monospace; font-size: 10px; }
.shot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10%; }
.score-badge { position: absolute; top: -1px; right: -1px; background: var(--color-accent); color: var(--color-bg);
  padding: 6px 10px; display: flex; align-items: baseline; gap: 2px; font-family: var(--font-heading); font-weight: 600; z-index: 1; }
.h-sec { font-size: 28px; text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.seg-opt { color: var(--color-text); text-decoration: none; }
.seg-opt.on { background: var(--color-accent); color: var(--color-bg); }
.seg-opt.on:hover { color: var(--color-bg); }
.theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: block; }
[data-theme="dark"] .theme-toggle .moon { display: none; }

@media (max-width: 720px) {
  .hdr { gap: 16px !important; }
  .hdr .search-txt { display: none; }
  .search-row { grid-template-columns: 80px minmax(0, 1fr) auto !important; gap: 14px !important; }
}
/* drop the photos' white backgrounds so the hatch shows through (light theme only; dark keeps them as-is) */
:root:not([data-theme="dark"]) .shot-img { mix-blend-mode: multiply; }
.photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }