@font-face { font-family:'CommitMono'; src:url('fonts/CommitMono-400-Regular.otf') format('opentype'); font-weight:400; font-style:normal; }
@font-face { font-family:'CommitMono'; src:url('fonts/CommitMono-400-Italic.otf')  format('opentype'); font-weight:400; font-style:italic; }
@font-face { font-family:'CommitMono'; src:url('fonts/CommitMono-700-Regular.otf') format('opentype'); font-weight:700; font-style:normal; }
@font-face { font-family:'CommitMono'; src:url('fonts/CommitMono-700-Italic.otf')  format('opentype'); font-weight:700; font-style:italic; }

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

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

a       { color:#5753c8; text-decoration:underline; }
a:hover { color:#3e3aad; }
body    { background:#fcf9f5; font-family:'CommitMono',monospace; font-weight:400; color:#231f20; }

.home-page { display:flex; flex-direction:column; min-height:100vh; }

.home-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:48px;
  flex-shrink:0;
}

.home-logo  { display:block; height:33px; width:auto; }
.home-count { font-size:14px; line-height:1.5; text-transform:uppercase; color:#6b6864; }

.home-intro {
  padding:32px 48px;
  flex-shrink:0;
  max-width:960px;
}

.home-intro p {
  font-size:14px; line-height:1.5; text-transform:uppercase; color:#231f20;
  margin-bottom:8px;
}

.home-intro p:last-child { margin-bottom:0; }

.thumb-grid {
  flex:1;
  display:flex;
  flex-wrap:wrap;
  gap:3px;
  padding:3px 48px;
  align-items:flex-start;
  align-content:flex-start;
}

.thumb-item {
  display:block;
  overflow:hidden;
  background:#e3e0dd;
  position:relative;
  flex:none;
}

.thumb-item img {
  display:block;
  max-height:320px;
  width:auto;
  height:auto;
  transition:opacity 0.15s;
}

.thumb-item:hover img { opacity:1; }

.thumb-item .thumb-dir {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:12px;
  font-size:12px; line-height:1.4; text-transform:uppercase; text-align:center;
  color:#fff;
  background:rgba(0,0,0,0.75);
  opacity:0;
  transition:opacity 0.15s;
  pointer-events:none;
}

.thumb-item:hover .thumb-dir,
.thumb-item:focus-within .thumb-dir { opacity:1; }

.home-footer {
  font-size:14px; line-height:1.5; text-transform:uppercase; flex-shrink:0;
  padding:32px 48px;
}

@media (max-width:899px) {
  .home-header { padding:16px; }
  .home-logo   { height:24px; }
  .home-count  { display:none; }
  .home-intro  { padding:24px 16px; max-width:none; }

  .thumb-grid {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:2px;
    padding:2px 16px;
  }

  .thumb-item { aspect-ratio:1; }

  .thumb-item img {
    width:100%;
    height:100%;
    max-height:none;
    object-fit:cover;
  }

  .home-footer { padding:24px 16px; }
}

.nav-list::-webkit-scrollbar       { width:4px; }
.nav-list::-webkit-scrollbar-track { background:transparent; }
.nav-list::-webkit-scrollbar-thumb { background:#c9c7c4; border-radius:2px; }
.nav-list { scrollbar-width:thin; scrollbar-color:#c9c7c4 transparent; }

.page { display:flex; flex-direction:column; height:100vh; padding:48px; gap:24px; }

.page-logo { display:block; flex-shrink:0; height:33px; width:auto; }

.readme { font-size:14px; line-height:1.5; max-width:720px; flex-shrink:0; }
.readme h1, .readme h2, .readme h3 { font-size:14px; font-weight:700; line-height:1.5; text-transform:uppercase; margin-bottom:4px; }
.readme p { margin-bottom:8px; }
.readme p:last-child { margin-bottom:0; }
.readme strong { font-weight:700; }
.readme em     { font-style:italic; }

.nav-row { display:none; }
.nav-toggle {
  font-family:inherit; font-size:16px; line-height:1.5; text-transform:uppercase;
  color:#5753c8; background:none; border:none; padding:0; cursor:pointer;
}

.layout { display:flex; gap:80px; flex:1; min-height:0; }

.nav-column { width:300px; flex-shrink:0; display:flex; flex-direction:column; min-height:0; align-self:stretch; }

.nav-list { list-style:none; flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; }

.nav-list li { display:flex; align-items:baseline; gap:4px; }
.nav-list li::before {
  content:'';
  display:inline-block;
  flex-shrink:0;
  width:0.6em;
  height:0.6em;
  background-color:#14132e;
  -webkit-mask:url('arrow-right.svg') no-repeat center / contain;
  mask:url('arrow-right.svg') no-repeat center / contain;
}
.nav-list li a { display:block; font-size:14px; line-height:1.5; text-transform:uppercase; white-space:normal; }
.nav-list li.selected a { color:#14132e; text-decoration:none; cursor:default; }

.nav-list li.nav-back::before {
  -webkit-mask-image:url('arrow-left.svg');
  mask-image:url('arrow-left.svg');
}
.nav-list li.nav-back a { color:#5753c8; }
.nav-list .nav-back + li { margin-top:8px; }

.nav-list li.nav-folder-header { display:block; margin-top:20px; padding-bottom:4px; border-bottom:1px solid #c9c7c4; }
.nav-list li.nav-folder-header::before { content:none; }
.nav-list li.nav-folder-header span { font-size:14px; line-height:1.5; text-transform:uppercase; font-weight:700; color:#231f20; }

.nav-list .nav-series-header { display:block; font-size:14px; line-height:1.5; text-transform:uppercase; color:#5753c8; cursor:pointer; text-decoration:underline; }
.nav-list .nav-series-header::before { content:none; }
.nav-list .nav-series-header:hover { color:#3e3aad; }
.nav-list .nav-series-header.selected { color:#14132e; text-decoration:none; cursor:default; }

.series-page { display:flex; flex-direction:column; gap:48px; }
.series-item  { display:flex; flex-direction:column; gap:16px; align-items:flex-start; }

.panel { flex:1; min-width:0; overflow-y:auto; align-self:flex-start; max-height:100%; }

.preview-content { position:relative; }
.panel-overlay   { position:absolute; inset:0; z-index:10; background:rgba(252,249,245,0.95); }

.copy { display:flex; flex-direction:column; gap:8px; background:#e3e0dd; border-radius:4px; padding:8px 16px; max-width:720px; }
.copy + .copy { margin-top:16px; }
.copy p { font-weight:700; font-size:16px; line-height:1.5; text-transform:uppercase; }

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

.preview { display:flex; flex-direction:column; gap:16px; min-height:calc(100vh - 280px); }
.preview-label { font-size:16px; line-height:1.5; text-transform:uppercase; color:#14132e; white-space:nowrap; }
.gif-toggle { font-family:inherit; font-size:inherit; font-weight:inherit; line-height:inherit; text-transform:inherit; color:#5753c8; background:none; border:none; padding:0; cursor:pointer; text-decoration:underline; }
.gif-toggle:hover { color:#3e3aad; }
.preview-canvas { display:block; width:auto; height:auto; max-width:100%; max-height:calc(100vh - 280px); }
.preview-image { display:block; width:auto; height:auto; max-width:100%; max-height:calc(100vh - 280px); }

@keyframes loadWave {
  0%, 60%, 100% { opacity:0.15; }
  30%            { opacity:1; }
}
.preview-loading { font-size:16px; line-height:1.5; letter-spacing:0.25em; color:#14132e; }
.load-char              { display:inline-block; opacity:0.15; }
.load-char:nth-child(1) { animation:loadWave 0.9s ease-in-out infinite; }
.load-char:nth-child(2) { animation:loadWave 0.9s ease-in-out infinite; animation-delay:.25s; }
.load-char:nth-child(3) { animation:loadWave 0.9s ease-in-out infinite; animation-delay:.5s; }

.preview-copy { font-size:14px; line-height:1.5; max-width:600px; margin-top:8px; }
.preview-copy h1, .preview-copy h2, .preview-copy h3 { font-size:14px; font-weight:700; line-height:1.5; text-transform:uppercase; margin-bottom:4px; }
.preview-copy p { margin-bottom:8px; }
.preview-copy p:last-child { margin-bottom:0; }
.preview-copy strong { font-weight:700; }
.preview-copy em     { font-style:italic; }


.footer { font-size:14px; line-height:1.5; text-transform:uppercase; flex-shrink:0; }

.hidden { display:none !important; }

@media (max-width:899px) {
  .page { height:auto; min-height:100vh; padding:16px; gap:0; }
  .page-logo { height:24px; margin-bottom:8px; }
  .readme { margin-bottom:8px; }

  .nav-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 0; width:100%; flex-shrink:0;
  }

  .layout { flex-direction:column; gap:0; flex:none; min-height:0; overflow:visible; }
  .nav-column { display:none; width:100%; min-height:0; }
  .nav-list { overflow-y:visible; min-height:0; }
  .panel { width:100%; max-height:none; overflow-y:visible; align-self:auto; }
  .preview { min-height:60vh; }
  .preview-canvas { width:auto; max-width:100%; max-height:80vh; }
  .preview-image { width:auto; max-width:100%; max-height:80vh; }
  .preview-label { white-space:normal; overflow-wrap:break-word; min-width:0; }
  .footer { margin-top:144px; white-space:normal; }

  .page.drawer-open .nav-row    { border-bottom:2px solid #c9c7c4; margin-bottom:8px; }
  .page.drawer-open .nav-column { display:flex; }
  .page.drawer-open .panel      { display:none; }
  .page.drawer-open .footer     { display:none; }
}