/* ============================================================
   The Information Syndicate — minimal
   palette: "linen"
   ============================================================ */

:root{
  --bg:      #FAF9F6;
  --text:    #33312E;
  --muted:   #8C857A;
  --accent:  #A89B86;
  --accent-d:#8a7d68;
  --line:    #ECE9E3;

  --mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;
  --serif:'Newsreader', Georgia, serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.wrap{
  max-width:760px;
  margin:0 auto;
  padding:clamp(2.5rem,8vw,5.5rem) clamp(1.25rem,5vw,2rem) 3rem;
}

/* ---- header ---------------------------------------------- */
.head{
  margin-bottom:clamp(2.5rem,7vw,4rem);
}
.title{
  font-family:var(--mono);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.05;
  font-size:clamp(1.9rem,7vw,3.4rem);
  text-wrap:balance;
}
.motto{
  margin-top:clamp(0.8rem,2.5vw,1.2rem);
  font-family:var(--mono);
  font-weight:400;
  font-size:clamp(0.85rem,2.6vw,1rem);
  color:var(--muted);
  letter-spacing:0.01em;
}

/* ---- video list ------------------------------------------ */
.list{
  display:flex;
  flex-direction:column;
  gap:clamp(1.5rem,4vw,2.25rem);
  border-top:1px solid var(--line);
  padding-top:clamp(1.5rem,4vw,2.25rem);
}

.vid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(1rem,3vw,1.5rem);
  text-decoration:none;
  color:inherit;
  align-items:start;
}
.vid-thumb{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:3px;
  background:#e8e5df;
}
.vid-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 0.45s ease;
}
.vid:hover .vid-thumb img,
.vid:focus-visible .vid-thumb img{ transform:scale(1.035); }

.vid-play{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%;
  background:rgba(250,249,246,0.82);
  backdrop-filter:blur(2px);
  display:grid; place-items:center;
  transition:background 0.25s ease;
}
.vid-play::after{
  content:""; width:0; height:0; margin-left:3px;
  border-left:13px solid var(--text);
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
}
.vid:hover .vid-play{ background:#fff; }

.vid-body{ min-width:0; display:flex; flex-direction:column; }
.vid-date{
  display:block;
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:0.4rem;
}
.vid-title{
  display:block;
  font-family:var(--mono);
  font-weight:500;
  font-size:clamp(1.05rem,3vw,1.25rem);
  line-height:1.25;
  letter-spacing:-0.01em;
  margin-bottom:0.5rem;
}
.vid:hover .vid-title,
.vid:focus-visible .vid-title{ color:var(--accent-d); }
.vid-desc{
  display:block;
  font-size:0.98rem;
  line-height:1.55;
  color:var(--text);
}

.vid:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; border-radius:2px; }

/* ---- footer ---------------------------------------------- */
.foot{
  margin-top:clamp(3rem,9vw,5.5rem);
  padding-top:1.5rem;
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem 2rem;
  font-family:var(--mono);
  font-size:0.85rem;
}
.foot a{
  color:var(--muted);
  text-decoration:none;
  transition:color 0.2s ease;
}
.foot a:hover,
.foot a:focus-visible{ color:var(--accent-d); text-decoration:underline; text-underline-offset:3px; }

/* ---- mobile ---------------------------------------------- */
@media (max-width:560px){
  .vid{
    grid-template-columns:1fr;
    gap:0.75rem;
  }
  .foot{ flex-direction:column; gap:0.7rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}