/* ==========================================================================
   journal.css — The Journal (index + category pages)
   Builds on base.css / style.css. Uses only the site design tokens.
   ========================================================================== */

/* ---------- Shared shell ---------- */

.jr-bar{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--color-divider);
}
.jr-bar-in{
  display:flex; align-items:center; gap:var(--space-6);
  padding-block:var(--space-4); flex-wrap:wrap;
}
.jr-bar .kicker{max-width:none; margin:0; white-space:nowrap}

/* Category nav ------------------------------------------------------------ */

.jr-nav{display:flex; gap:var(--space-1); flex-wrap:wrap; margin-inline-start:auto}
.jr-nav a,
.jr-nav button{
  font-family:var(--font-body);
  font-size:var(--text-sm);
  line-height:1;
  padding:.62em 1.05em;
  border:1px solid var(--color-divider);
  border-radius:999px;
  color:var(--color-text-muted);
  text-decoration:none;
  white-space:nowrap;
  transition:border-color .18s ease, color .18s ease, background-color .18s ease;
}
.jr-nav button{background:transparent; cursor:pointer; font-family:var(--font-body)}
.jr-nav a:hover,
.jr-nav button:hover{color:var(--color-text); border-color:var(--color-primary)}
.jr-nav a[aria-current="page"],
.jr-nav button[aria-current="page"]{
  color:#1b1206;
  background:var(--color-primary);
  border-color:var(--color-primary);
}
.jr-nav a .n,
.jr-nav button .n{
  font-variant-numeric:tabular-nums;
  /* .6 dropped the count to 2.66:1 on the selected chip, where near-black sits
     on the gold fill. .78 keeps it visibly secondary to the category name and
     clears AA. */
  opacity:.78;
  margin-inline-start:.5em;
  font-size:.9em;
}

/* Controls ---------------------------------------------------------------- */

.jr-tools{
  display:flex; align-items:center; gap:var(--space-4);
  flex-wrap:wrap; margin-block:var(--space-8) var(--space-6);
}
.jr-search{position:relative; flex:1 1 15rem; max-width:26rem}
.jr-search input{
  width:100%;
  font-family:var(--font-body);
  font-size:var(--text-base);
  color:var(--color-text);
  background:transparent;
  border:0; border-bottom:1px solid var(--color-divider);
  padding:.55em 1.9em .55em 0;
  transition:border-color .18s ease;
}
.jr-search input::placeholder{color:var(--color-text-faint)}
.jr-search input:focus{outline:0; border-bottom-color:var(--color-primary)}
.jr-search svg{
  position:absolute; right:.15em; top:50%; translate:0 -50%;
  width:1.05em; height:1.05em; stroke:var(--color-text-faint); fill:none;
  stroke-width:1.5; pointer-events:none;
}

.jr-views{display:flex; gap:0; border:1px solid var(--color-divider); border-radius:999px; padding:3px}
.jr-views button{
  font-family:var(--font-body); font-size:var(--text-sm); line-height:1;
  padding:.55em 1.1em; border:0; border-radius:999px; cursor:pointer;
  background:transparent; color:var(--color-text-muted);
  display:inline-flex; align-items:center; gap:.5em;
  transition:background-color .18s ease, color .18s ease;
}
.jr-views button svg{width:1em; height:1em; fill:currentColor}
.jr-views button:hover{color:var(--color-text)}
.jr-views button[aria-pressed="true"]{background:var(--color-primary); color:#1b1206}

.jr-count{
  font-family:var(--font-body); font-size:var(--text-sm);
  color:var(--color-text-faint); font-variant-numeric:tabular-nums;
  margin-inline-start:auto; white-space:nowrap;
}

/* ---------- Gallery ---------- */

.jr-grid{
  display:grid; gap:var(--space-8) var(--space-6);
  grid-template-columns:repeat(auto-fill, minmax(16rem, 1fr));
  list-style:none; padding:0; margin:0;
}
.jr-card{margin:0; max-width:none}
.jr-card a{
  display:grid; gap:var(--space-3);
  text-decoration:none; color:inherit;
  /* a grid item's automatic minimum size is min-content, so a long unbroken
     headline pushed the anchor wider than the card that holds it */
  min-width:0;
}
.jr-card a > *{ min-width:0 }
.jr-card h3{ overflow-wrap:anywhere }
.jr-shot{
  position:relative; overflow:hidden;
  aspect-ratio:16/10;
  background:#2a2318;
  border-radius:2px;
}
/* The whole thumbnail is always visible: the artwork is CONTAINed, and a
   blurred, darkened copy of itself fills whatever space is left over so the
   frame never shows a bare letterbox. */
.jr-shot img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain; object-position:center;
  z-index:1;
  transition:scale .5s cubic-bezier(.2,.7,.3,1), filter .35s ease;
}
.jr-shot .jr-fill{
  object-fit:cover;
  z-index:0;
  filter:blur(18px) saturate(.75) brightness(.55);
  scale:1.12;
  transition:none;
}
.jr-card a:hover .jr-shot img{scale:1.03; filter:saturate(1.06)}
.jr-card a:hover .jr-shot .jr-fill{scale:1.12; filter:blur(18px) saturate(.75) brightness(.55)}
.jr-shot::after{
  content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px rgb(0 0 0 / .10);
  pointer-events:none;
}
.jr-meta{
  display:flex; align-items:baseline; gap:.7em;
  font-family:var(--font-body); font-size:var(--text-xs);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--color-text-faint);
  white-space:nowrap; min-width:0;
}
.jr-meta time{font-variant-numeric:tabular-nums; letter-spacing:.08em; flex:0 0 auto}
.jr-tag{
  color:var(--color-primary-text);
  overflow:hidden; text-overflow:ellipsis; min-width:0;
}
/* language chip sits on the thumbnail, so it never breaks the meta line */
.jr-lang{
  position:absolute; top:.5rem; right:.5rem; z-index:1;
  letter-spacing:.1em; line-height:1;
  background:rgb(20 16 11 / .78); color:#f2ead9;
  border:1px solid rgb(255 255 255 / .22); border-radius:2px;
  padding:.32em .5em; font-size:var(--text-xs);
  font-family:var(--font-body); text-transform:uppercase;
  backdrop-filter:blur(3px);
}
.jr-card h3{
  font-family:var(--font-display); font-weight:400;
  font-size:var(--text-lg); line-height:1.2;
  letter-spacing:-.012em; margin:0; max-width:none;
  text-wrap:balance;
  color:var(--color-text);
  transition:color .18s ease;
}
.jr-card a:hover h3{color:var(--color-primary-text)}

/* ---------- List ---------- */

.jr-list{list-style:none; padding:0; margin:0; border-top:1px solid var(--color-divider)}
.jr-year{
  font-family:var(--font-body); font-size:var(--text-xs);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--color-text-faint);
  padding:var(--space-8) 0 var(--space-3);
  border-bottom:1px solid var(--color-divider);
  max-width:none;
}
.jr-row{border-bottom:1px solid var(--color-divider); max-width:none}
.jr-row a{
  display:grid; align-items:baseline;
  grid-template-columns:6.5rem 1fr auto;
  gap:var(--space-4);
  padding:var(--space-4) 0;
  text-decoration:none; color:inherit;
  transition:padding-inline-start .22s ease;
}
.jr-row a:hover{padding-inline-start:var(--space-3)}
.jr-row time{
  font-family:var(--font-body); font-size:var(--text-xs);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--color-text-faint); font-variant-numeric:tabular-nums;
}
.jr-row .t{
  font-family:var(--font-display); font-weight:400;
  font-size:var(--text-base); line-height:1.25;
  color:var(--color-text); max-width:60ch;
  transition:color .18s ease;
}
.jr-row a:hover .t{color:var(--color-primary-text)}
.jr-row .c{
  font-family:var(--font-body); font-size:var(--text-xs);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--color-text-faint); white-space:nowrap;
}

/* View switching ---------------------------------------------------------- */

[data-view="gallery"] .jr-list,
[data-view="list"] .jr-grid{display:none}

.jr-empty{
  font-family:var(--font-body); color:var(--color-text-faint);
  padding:var(--space-16) 0; text-align:center; max-width:none;
}

/* ---------- Landing page ---------- */

.jr-cats{
  display:grid; gap:var(--space-6);
  grid-template-columns:repeat(auto-fit, minmax(17rem, 1fr));
  list-style:none; padding:0; margin:0;
}
.jr-cat{margin:0; max-width:none}
.jr-cat a{
  display:grid; gap:var(--space-4);
  padding:var(--space-8);
  border:1px solid var(--color-divider);
  text-decoration:none; color:inherit;
  height:100%;
  align-content:start;
  transition:border-color .2s ease, background-color .2s ease;
}
.jr-cat a:hover{border-color:var(--color-primary); background:color-mix(in srgb, var(--color-primary) 5%, transparent)}
.jr-cat .num{
  font-family:var(--font-display); font-weight:300;
  font-size:var(--text-3xl); line-height:.9;
  color:var(--color-primary-text); font-variant-numeric:tabular-nums;
}
.jr-cat h3{
  font-family:var(--font-display); font-weight:400;
  font-size:var(--text-xl); line-height:1.1; margin:0; max-width:none;
}
.jr-cat p{font-size:var(--text-sm); color:var(--color-text-muted); margin:0; max-width:34ch}
.jr-cat .go{
  font-family:var(--font-body); font-size:var(--text-sm);
  color:var(--color-primary-text); margin-top:auto;
}

.jr-latest{
  display:grid; gap:var(--space-8) var(--space-6);
  grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr));
  list-style:none; padding:0; margin:0;
}

/* Responsive -------------------------------------------------------------- */

@media (max-width:760px){
  .jr-row a{grid-template-columns:1fr; gap:var(--space-1); padding:var(--space-4) 0}
  .jr-row .c{grid-row:1}
  .jr-bar-in{gap:var(--space-3)}
  .jr-nav{margin-inline-start:0; width:100%}
  .jr-count{margin-inline-start:0}
}

@media (prefers-reduced-motion:reduce){
  .jr-card a:hover .jr-shot img{scale:1}
  .jr-row a{transition:none}
  .jr-row a:hover{padding-inline-start:0}
}


/* The Journal reads two articles per row on desktop: bigger cards, bigger art. */
@media (min-width: 720px){
  .jr-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-9) var(--space-7) }
}


/* ---- Journal: the Medium line -------------------------------------------
   One quiet line under the hero for the reader who came for the newest piece.
   The full banner still closes the page; this is a signpost, not a second
   destination, so it carries no image and no button -- type only.          */
.jr-medium-strip {
  border-bottom: 1px solid var(--color-border, rgba(21,51,51,.14));
  background: transparent;
}

.jr-medium-strip p {
  /* one flowing line: a flex row here made the link a block of its own and
     broke a 40-word sentence onto two lines for no reason. */
  margin: 0;
  padding: .85rem 0;
  font-size: var(--text-sm, .92rem);
  color: var(--color-text-muted, #5d6a6a);
  line-height: 1.5;
  /* the page's default measure caps a paragraph at 36rem; this is a one-line
     signpost, not body copy, so it keeps the full width of the wrap. */
  max-width: none;
}

.jr-medium-strip a {
  white-space: nowrap;
}

.jr-medium-strip strong {
  color: var(--color-primary-text, #9a7b1f);
  font-variant-numeric: tabular-nums;
}

.jr-medium-strip a {
  color: var(--color-primary-text, #9a7b1f);
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-inline-start: .25rem;
}

.jr-medium-strip a:hover,
.jr-medium-strip a:focus-visible {
  text-decoration-thickness: 2px;
}