/* ===== Theme ===== */
:root{
  --bg:#fff; --text:#111827; --muted:#4b5563; --border:#e5e7eb;
  --link:#1f3a8a; --link-h:#1d4ed8;
}

/* ===== Page ===== */
html,body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}
.wrap{ max-width:1100px; margin:0 auto; padding:28px 20px 56px; }
h1{ margin:0 0 8px; font-weight:750; font-size:clamp(1.5rem,4vw,2rem); }
.subtitle{ color:var(--muted); margin:0 0 16px; }

#pub-search{
  width:100%; max-width:420px; margin:8px 0 10px;
  padding:8px 10px; border:1px solid var(--border); border-radius:8px;
}

.list{ border-top:1px solid var(--border); }

/* ===== Item layout (desktop): TEXT left | IMAGE right ===== */
.item{
  display:grid;
  grid-template-columns: minmax(0,1fr) 240px;
  grid-template-areas: "text image";
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--border);
  align-items:start;
}
.item > img.thumb{ grid-area:image; align-self:start; }
.item > :not(img.thumb){ grid-area:text; align-self:start; }
.item > :not(img.thumb) > *:first-child{ margin-top:0 !important; }

.item.no-thumb{
  grid-template-columns: 1fr;
  grid-template-areas: "text";
}
.item.no-thumb > img.thumb{ display:none; }

/* ===== Content styles ===== */
.title{
  margin:0 0 4px; font-weight:700; font-size:clamp(1rem,3vw,1.1rem); line-height:1.3;
}
.title a{ color:var(--link); text-decoration:none; }
.title a:hover{ color:var(--link-h); text-decoration:underline; }

.authors{ font-size:clamp(.9rem,2.5vw,1rem); margin:2px 0; }
.authors .me{ font-weight:700; }

.venue{ color:var(--muted); font-size:clamp(.9rem,2.5vw,1rem); margin:2px 0; }

/* ===== Thumbnails ===== */
img.thumb{
  width:100%;
  aspect-ratio: 4 / 3;        /* desktop 4:3 */
  object-fit:cover;
  border-radius:10px;
  border:1px solid var(--border);
  background:#f3f4f6;
  display:block;
}

/* ===== Chips ===== */
.chips{
  display:flex; flex-wrap:wrap; gap:6px 8px; margin-top:6px;
  font-size:clamp(.8rem,2.5vw,.9rem);
}
.chip{
  padding:2px 8px; border:1px solid var(--border); border-radius:999px;
  background:#f9fafb; text-decoration:none; color:inherit;
}
.chip:hover{ background:#f3f4f6; }

/* ===== Filters (top bar + inline badge) ===== */
.filter-row{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:6px 0 10px; }
.filter-btn{
  --c:#5E6F65;
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px; text-decoration:none;
  border:1px solid color-mix(in srgb, var(--c) 35%, #fff);
  background:color-mix(in srgb, var(--c) 10%, #fff);
  color:#243127; font-weight:500; font-size:0.85rem;
  transition:opacity .12s ease, box-shadow .12s ease, background .12s ease;
  opacity:.75; outline: none;
}
.filter-btn:hover{ opacity:.9; background:color-mix(in srgb, var(--c) 14%, #fff); }
.filter-btn[aria-pressed="true"]{
  opacity:1;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 28%, #fff);
  background:color-mix(in srgb, var(--c) 18%, #fff);
  font-weight:600;
}
.filter-btn:focus-visible{ box-shadow: 0 0 0 3px rgba(79,109,91,.25); }

.type-badge{
  --c:#5E6F65;
  margin-left:8px; padding:2px 8px; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--c) 35%, #fff);
  background:color-mix(in srgb, var(--c) 12%, #fff);
  color:#243127; font-size:12px; text-decoration:none; outline:none;
  opacity:.75; transition:opacity .12s ease, box-shadow .12s ease, background .12s ease;
}
.type-badge:hover{ opacity:.9; }
.type-badge.active{
  opacity:1; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 28%, #fff);
  background:color-mix(in srgb, var(--c) 18%, #fff);
}
.type-badge.dim{ opacity:.45; }
.type-badge:focus-visible{ box-shadow: 0 0 0 3px rgba(79,109,91,.25); }

/* ===== Desktop accent bar (left of text) ===== */
.text-with-accent{ position:relative; padding-left:12px; }
.accent-bar{
  position:absolute; left:0; top:0; width:4px;
  background:var(--accent,#4f6d5b); border-radius:3px; height:0;
  transition:height .15s ease;
}
.award-inline {
  display:block;
  color: var(--muted);               /* same tone as .venue */
  font-style: italic;                  /* slight emphasis */
  font-size: clamp(.9rem, 2.5vw, 1rem);
  line-height: 1.45;
  margin: 2px 0 0;                   /* tight to the venue line */
  word-break: break-word;            /* wrap long award names */
}
/* ===== Year separators (typographic) ===== */
.year-sep{
  display:flex; align-items:center; gap:10px;
  margin:28px 0 14px;
  font-size:1.1rem; font-weight:600; color:#374151;
}
.year-sep .line{ height:1px; flex:1; background:var(--border,#e5e7eb); opacity:.9; }

/* ===== Mobile (image ABOVE title) + continuous left spine ===== */
@media (max-width:640px){
  .item{
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "image" "text";
    gap: 10px 0;
    padding-left: 12px;            /* room for mobile spine */
  }
  .item::before{
    content:""; position:absolute; left:0; top:15px; bottom:15px;
    width:3px; background:var(--accent); border-radius:2px;
  }
  .accent-bar{ display:none; }
  img.thumb{
    grid-area:image; width:100%; aspect-ratio:21/9; object-fit:cover;
    border:1px solid var(--border); border-radius:8px; margin:0;
  }
  .text-with-accent{ grid-area:text; padding-left:0; }
  .year-sep{ margin:18px 0 8px; }
  .chips{ gap:6px; }
  .award-inline{
    margin-top: 1px;
    line-height: 1.4;
  }
}

/* Visual separator */
.chip-sep {
  color: var(--muted);
  opacity: 0.6;
  margin: 0 4px;
  font-size:1rem;
}

/* Hashtag matches chip font size */
.type-hashtag {
  font-size:1rem;
  color: #4F6D5B;           /* earthy green accent */
  font-weight: 400;
  opacity: 0.85;
}

.type-hashtag:hover {
  opacity: 1;
}
.equal-inline{
  display:block;
  color: var(--muted);
  font-weight:400;
  font-size: clamp(.85rem, 2.3vw, .95rem);
  line-height: 1.45;
  margin-top: 2px;
}