/* Thoughts — lifted from prototypes/06-chapters/thoughts.html, the design contract. */

.tabs{display:flex;gap:.45rem;margin-bottom:clamp(1.5rem,4vh,2.5rem)}
.tabs button{border:1px solid var(--line-2);border-radius:999px;padding:.5rem 1.1rem;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:300;color:var(--dim);
  transition:color .3s var(--e-out-quart),background-color .3s,border-color .3s}
.tabs button[aria-pressed="true"]{background:var(--wash);color:var(--ink);border-color:var(--wash)}

/* the lead article gets the whole width */
.lead{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(1.2rem,4vw,3rem);
  align-items:center;padding-bottom:clamp(2.5rem,7vh,4rem);border-bottom:1px solid var(--line);
  margin-bottom:clamp(2.5rem,7vh,4rem)}
.lead .fr{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0E0D0B}
.lead .fr img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.85);
  transition:transform 1.3s var(--e-out-quart),filter .6s}
.lead:hover .fr img{transform:scale(1.05);filter:saturate(1) brightness(1)}
.lead h2{font-weight:200;text-transform:uppercase;font-size:clamp(1.7rem,4.6vw,3.4rem);
  line-height:1;letter-spacing:-.045em;margin-top:.9rem}
.lead p{color:#B9B4AA;font-weight:300;margin-top:1rem;max-width:46ch}

.feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));
  gap:clamp(1.2rem,3vw,2.4rem)}
.art{display:block;padding-bottom:1.6rem;border-bottom:1px solid var(--line)}
.art[hidden]{display:none}
.art .fr{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0E0D0B;margin-bottom:1rem}
.art .fr img{width:100%;height:100%;object-fit:cover;filter:saturate(.75) brightness(.8);
  transition:transform 1.2s var(--e-out-quart),filter .6s}
.art:hover .fr img{transform:scale(1.05);filter:saturate(1) brightness(1)}
.art h3{font-weight:300;font-size:clamp(1.05rem,2vw,1.35rem);letter-spacing:-.02em;
  line-height:1.22;margin-top:.7rem}
.art p{color:var(--dim);font-weight:300;font-size:.9rem;margin-top:.5rem;line-height:1.55}
.badge{display:inline-block;font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--bronze);border:1px solid rgba(176,138,94,.4);border-radius:999px;padding:.2rem .6rem}
.meta{display:flex;gap:1rem;align-items:center;margin-top:.7rem}
@media (max-width:760px){.lead{grid-template-columns:1fr}.lead .fr{order:-1}}