/**, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0;}*/
html { font-size: 16px;}
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #352930; color: #f0e8d8;
  padding: 2rem 1rem 3rem;
}

a {
     color: #dba95e; 
}

header {
    margin-bottom: 3rem;
}

footer {
  color: #bdb4a2;
  text-align: center; margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(240,232,216,.08);
  margin: 0 12%;
}


h1 img {
    vertical-align: center;
}

data, code, .thumb-badge, .row-line1 a, .toggle-btn {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    color: #dba95e; 
}

.row {
  display: flex; gap: 1.25rem;
  background: linear-gradient(160deg,#41325580,#1c162ad1);
  border: 1px solid rgba(240,232,216,.12); border-radius: 16px;
  padding: 1rem; align-items: flex-start;
  margin: 1rem;
}

span.line {text-wrap-mode: nowrap;}

.row-thumb {
  max-width: 250px; 
  aspect-ratio: 5/4;
  flex-shrink: 0; width: 200px; height: 160px;
  border-radius: 8px; overflow: hidden;
  background: rgba(240,232,216,.06); position: relative;
}
.row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block;}
.thumb-placeholder { width: 100%; height: 100%; background: rgba(240,232,216,.04);}

.row-body { color: #c6b7a8;; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; position: relative;}

.row-line1 { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.4rem;}
.row-line1 a {color: #f0e8d8;}
.row-line1 a:hover { color: #dba95e;}
.row-line1 a:first-child {font-size: 130%;}
.row-details {font-style: italic;}

.row-link {text-wrap-mode: nowrap; text-overflow: ellipsis; overflow: hidden;}
.ext-icon { color: #b0a090; font-weight: 800;}

/* Thumbrella results */
.result-line { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.1rem;}
.toggle-btn {
  font-size: 100%;
  color: #dfb8e7;
  background: none; border: none; cursor: pointer; padding: 0;
}
.toggle-btn:hover {
  background: #4c3553;
}
.toggle-btn .chevron { display: inline-block; transition: transform 0.2s;}
.toggle-btn[aria-expanded="true"] .chevron { transform: rotate(90deg);}
.result-json {
  font-size: 80%;
  display: none;
  color: #eac4f3;
  background: #2a1e46; border: 1px solid rgba(240,232,216,.2);
  border-radius: 8px; padding: 0.65rem 0.75rem;
  overflow-x: auto; max-height: 280px; overflow-y: auto;
  white-space: pre; margin-top: 0.3rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.result-json.open {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 100;
  margin-top: 0.25rem;
}

@media (max-width: 640px) {
  body {font-size: 14px;}
  .row { flex-direction: column;}
  .row-thumb { width: 100%; height: auto; aspect-ratio: 5/4;}
}