@font-face { font-family:'Metro Sans'; src:url('fonts/metro-sans-regular.woff2') format('woff2'), url('fonts/metro-sans-regular.woff') format('woff'); font-weight:400; font-style:normal; }
@font-face { font-family:'Metro Sans'; src:url('fonts/metro-sans-bold.woff2')    format('woff2'), url('fonts/metro-sans-bold.woff')    format('woff'); font-weight:700; font-style:normal; }

:root {
  --bg:      #fcf9f5;
  --fg:      #231f20;
  --card-bg: #0d0d0d;
  --card-fg: #fcf9f5;
  --rule:    #231f20;
  --thumb-size: 144px;
  --thumb-gap:  8px;
}

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

body { background:var(--bg); font-family:'Metro Sans', sans-serif; font-weight:400; color:var(--fg); }

.icon { display:inline-block; position:relative; top:1px; width:20px; height:20px; flex-shrink:0; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; }
.icon-pause { -webkit-mask-image:url('icons/pause-circle.svg'); mask-image:url('icons/pause-circle.svg'); background-color:var(--fg); }
.icon-play  { -webkit-mask-image:url('icons/play-circle.svg');  mask-image:url('icons/play-circle.svg');  background-color:var(--fg); }
.icon-add   { -webkit-mask-image:url('icons/add.svg');          mask-image:url('icons/add.svg');          background-color:var(--card-fg); }
.icon-info  { -webkit-mask-image:url('icons/info.svg');         mask-image:url('icons/info.svg');         background-color:var(--card-fg); }

.video-toggle {
  display:flex; align-items:center; gap:8px;
  font-family:inherit; background:none; border:none; padding:0; margin:0; cursor:pointer;
}
.video-toggle-label {
  font-weight:700; font-size:18px; line-height:1.5;
  color:var(--fg); text-decoration:underline;
}
.video-toggle .icon-play,
.video-toggle .label-play { display:none; }
.video-toggle.is-paused .icon-pause,
.video-toggle.is-paused .label-pause { display:none; }
.video-toggle.is-paused .icon-play { display:inline-block; }
.video-toggle.is-paused .label-play { display:inline; }
.video-toggle:hover .video-toggle-label,
.video-toggle:focus-visible .video-toggle-label { color:color-mix(in srgb, var(--fg) 75%, transparent); }

.site { display:flex; flex-direction:column; gap:80px; padding:48px; min-height:100vh; }

.site-top { display:flex; flex-direction:column; gap:16px; }

.banner {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--fg); border-radius:4px; padding:8px 12px; width:100%;
}
.banner-message { display:flex; align-items:center; gap:8px; }
.banner-text { color:var(--card-fg); font-weight:700; font-size:14px; line-height:1.5; white-space:nowrap; }
.banner-dismiss {
  font-family:inherit; font-weight:700; font-size:14px; line-height:1.5;
  color:var(--card-fg); text-decoration:underline; white-space:nowrap;
  background:none; border:none; padding:0; margin:0; cursor:pointer;
}
.banner-dismiss:hover,
.banner-dismiss:focus-visible { color:color-mix(in srgb, var(--card-fg) 75%, transparent); }

.site-header { display:flex; flex-direction:column; gap:8px; border-top:3px solid var(--rule); padding:24px 0; }

.site-title    { display:inline-block; font-weight:700; font-size:20px; line-height:1.5; color:inherit; text-decoration:none; }
.site-title:hover,
.site-title:focus-visible { color:color-mix(in srgb, var(--fg) 75%, transparent); text-decoration:underline; }
.site-subtitle { font-weight:400; font-size:28px; line-height:1.5; }

.site-footer { border-top:3px solid var(--rule); padding:24px 0; font-weight:400; font-size:16px; line-height:1.5; }
.site-footer a { color:inherit; }

.section { display:flex; flex-direction:column; gap:24px; }

.controls-row { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.image-count  { font-weight:400; font-size:20px; line-height:1.5; white-space:nowrap; }

.grid { display:flex; flex-wrap:wrap; gap:var(--thumb-gap); }

.thumb {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:var(--thumb-size); height:var(--thumb-size); flex-shrink:0;
  background:var(--card-bg); border-radius:4px; padding:12px;
  overflow:hidden;
}
.thumb-img,
.thumb-canvas { display:block; width:100px; height:100px; flex-shrink:0; object-fit:cover; transition:opacity 0.15s; }
a.thumb:hover .thumb-img,
a.thumb:hover .thumb-canvas,
a.thumb:focus-visible .thumb-img,
a.thumb:focus-visible .thumb-canvas { opacity:0.2; }

.thumb.load-more { text-decoration:none; }
.load-more-inner { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.load-more-inner .video-toggle-label { color:var(--card-fg); text-decoration:none; }
.thumb.load-more:hover .video-toggle-label,
.thumb.load-more:focus-visible .video-toggle-label { color:color-mix(in srgb, var(--card-fg) 75%, transparent); }

.hero-row { display:flex; align-items:flex-start; gap:24px; }

.hero {
  display:flex; align-items:center; flex:1; min-width:0;
  background:var(--card-bg); border-radius:4px; padding:12px;
}
.hero-inner { position:relative; width:100%; aspect-ratio:968/534; overflow:hidden; }
.hero-img,
.hero-canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-img.is-loading { opacity:0; }

@keyframes loadPulse {
  0%, 83.33%, 100% { opacity:0.15; }
  16.67%            { opacity:1; }
}
.hero-loading {
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center; gap:2px;
  font-size:28px; font-weight:700; letter-spacing:0.05em; color:var(--card-fg);
}
.hero-loading .load-char { display:inline-block; opacity:0.15; animation:loadPulse 0.9s ease-in-out infinite; }
.hero-loading .load-char:nth-child(1) { animation-delay:0s; }
.hero-loading .load-char:nth-child(2) { animation-delay:0.15s; }
.hero-loading .load-char:nth-child(3) { animation-delay:0.3s; }
.hero-loading .load-char:nth-child(4) { animation-delay:0.45s; }
.hero-loading .load-char:nth-child(5) { animation-delay:0.6s; }
.hero-loading .load-char:nth-child(6) { animation-delay:0.75s; }

.detail-info { display:flex; flex-direction:column; gap:8px; width:280px; flex-shrink:0; }
.detail-title { font-weight:400; font-size:20px; line-height:1.5; word-break:break-word; }

/* Detail view spacing is hand-tuned per pair rather than a uniform .section
   gap, so image→headline and headline→grid can differ. */
#detailView { gap:0; }
.additional-label { font-weight:400; font-size:28px; line-height:1.5; margin-top:72px; }
.additional-label + .grid { margin-top:12px; }

.empty { font-size:16px; line-height:1.5; }

.hidden { display:none !important; }

button.thumb.load-more { font-family:inherit; border:none; }

@media (max-width:899px) {
  .site { padding:16px; gap:40px; }
  .site-top { gap:12px; }
  .banner { flex-direction:column; align-items:flex-start; gap:8px; }
  .banner-text { white-space:normal; }
  /* Lines up with banner-text, not the icon: icon width (20px) + banner-message gap (8px). */
  .banner-dismiss { margin-left:28px; }
  .site-header { padding:16px 0; }
  .site-title    { font-size:20px; }
  .site-subtitle { font-size:20px; }
  .additional-label { font-size:20px; }
  .section { gap:16px; }

  .controls-row { flex-wrap:wrap; }
  .image-count  { font-size:16px; }
  .video-toggle-label { font-size:16px; }

  .grid { gap:2px; display:grid; grid-template-columns:repeat(3, 1fr); }
  .thumb { width:auto; height:auto; aspect-ratio:1; border-radius:2px; padding:8px; }
  .thumb-img, .thumb-canvas { width:100%; height:100%; }

  .hero-row { flex-direction:column; align-items:stretch; gap:12px; }
  .detail-info { width:100%; gap:4px; }
  .additional-label { margin-top:32px; }
  .additional-label + .grid { margin-top:16px; }

  .site-footer { padding:16px 0; }
}