/* brutalist: monospace, hard borders, inversion as the only highlight;
   light/dark follow prefers-color-scheme */
:root {
  color-scheme: light dark;
  --bg:#000; --fg:#fff; --mut:#8f8f8f; --plate:#000;
}
@media (prefers-color-scheme: light) {
  :root { --bg:#fff; --fg:#000; --mut:#5f5f5f; }
}
* { box-sizing:border-box }
html { scrollbar-color: var(--fg) var(--bg) }
body { margin:0; font:13px/1.45 ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;
       background:var(--bg); color:var(--fg) }

/* header */
header { display:flex; align-items:center; gap:18px; flex-wrap:wrap;
         padding:10px 16px; border-bottom:2px solid var(--fg);
         position:sticky; top:0; background:var(--bg); z-index:2 }
header h1 { margin:0; font-size:19px; font-weight:700;
            text-transform:uppercase; letter-spacing:.12em }
header input[type=search] { font:inherit; width:min(420px,60vw);
         padding:5px 10px; border:2px solid var(--fg); background:transparent;
         color:inherit; border-radius:0; appearance:none }
header input[type=search]::placeholder { color:var(--mut) }
header input[type=search]:focus { outline:none; background:var(--fg); color:var(--bg) }
header input[type=search]:focus::placeholder { color:var(--bg); opacity:.55 }
header .stats { color:var(--mut); font-size:12px }

/* layout */
.layout { display:flex; align-items:flex-start }
nav { width:200px; flex-shrink:0; padding:14px 16px; position:sticky; top:54px;
      max-height:calc(100vh - 54px); overflow:auto }
nav .hd { text-transform:uppercase; letter-spacing:.12em; font-size:11px;
          color:var(--mut); padding:0 6px 4px }
nav .hd.rule { border-top:1px solid var(--fg); padding-top:8px; margin-top:12px }
nav a { display:flex; justify-content:space-between; gap:8px; padding:2px 6px;
        color:inherit; text-decoration:none; cursor:pointer }
nav a:hover { background:var(--fg); color:var(--bg) }
nav a:hover .n { color:var(--bg) }
nav a.active { background:var(--fg); color:var(--bg) }
nav a.active .n { color:var(--bg) }
nav .nm { text-transform:uppercase }
nav .n { color:var(--mut); margin-left:auto }
nav label { display:flex; gap:8px; padding:2px 6px; cursor:pointer;
            white-space:nowrap }
nav label:hover { background:var(--fg); color:var(--bg) }
nav label:hover .n { color:var(--bg) }
nav input { accent-color:var(--fg); margin:0 }

main { flex:1; min-width:0; padding:14px 16px 60px }
p.q { color:var(--mut) }
p.q b { color:var(--fg) }

/* grid: contact sheet, 1px rules, hard offset shadow on hover */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(138px,1fr)); gap:12px }
.cell { border:1px solid var(--fg); background:var(--bg) }
.cell:hover { box-shadow:6px 6px 0 var(--fg); position:relative; z-index:1 }
.cell a.imglink { display:block; text-decoration:none; cursor:pointer }
.cell img { display:block; width:100%; aspect-ratio:1; object-fit:contain;
            background:var(--plate) }
.cell .cap { padding:3px 6px; font-size:10.5px; border-top:1px solid var(--fg) }
.cell .bkt { text-transform:uppercase; cursor:pointer }
.cell .bkt:hover { background:var(--fg); color:var(--bg) }
#sentinel { height:10px }

/* modal */
#modal { position:fixed; inset:0; z-index:5; display:flex;
         align-items:center; justify-content:center; padding:24px }
#modal[hidden] { display:none }
#modal .mbackdrop { position:absolute; inset:0; background:rgba(0,0,0,.85) }
#modal .mcard { position:relative; max-width:min(92vw,720px);
         max-height:calc(100vh - 48px); overflow:auto;
         background:var(--bg); border:2px solid var(--fg);
         box-shadow:10px 10px 0 var(--fg); padding:14px 16px }
#mimg { display:block; margin:0 auto; background:var(--plate);
        width:min(calc(92vw - 44px),560px); height:min(66vh,560px);
        object-fit:contain }
#mimg.px { image-rendering:pixelated }  /* honest about small sources */
#modal .mmeta { margin-top:12px }
#mtags { margin:0 0 6px; max-width:60ch }
#modal .mline1 { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap }
#mbkt { text-transform:uppercase; cursor:pointer; text-decoration:underline }
#mstats { color:var(--mut); font-size:12px }
#modal .mfoot { display:flex; gap:10px; margin-top:12px }
#modal .mfoot .sp { flex:1 }
#mclose, .dlbtn { font:inherit; text-transform:uppercase; letter-spacing:.08em;
        padding:5px 14px; border:2px solid var(--fg); background:transparent;
        color:inherit; border-radius:0; cursor:pointer; text-decoration:none;
        display:inline-block }
#mclose:hover { background:var(--fg); color:var(--bg) }
.dlbtn { background:var(--fg); color:var(--bg) }
.dlbtn:hover { background:transparent; color:var(--fg) }