/* Conservative Iranian - lecture pages.
   Loaded after site.css by templates/lecture.html.tmpl.

   Everything here is specific to a single lecture page: the Farsi title, the
   clip mini-index, the clip sections and their lecture spine, the transcript
   disclosures, and the books block. Shared chrome lives in site.css. */

/* ---------- title block ---------- */
.title-fa{
  font-size:clamp(17px,2.6vw,21px);color:var(--muted);
  margin:12px 0 0;font-weight:400;
}

/* ---------- index ---------- */
.ix{
  margin:clamp(38px,6vw,56px) 0 0;padding:24px 0 4px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.ix h2{
  font-family:var(--sans);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-deep);margin:0 0 4px;font-weight:600
}
.ix p{font-size:13.5px;color:var(--muted);margin:0 0 14px}
.ix ol{list-style:none;margin:0;padding:0;
  columns:2;column-gap:38px}
.ix li{break-inside:avoid;margin:0 0 2px}
.ix a{
  display:flex;gap:11px;align-items:baseline;border:0;
  padding:6px 0;color:var(--ivory);font-size:14.5px;line-height:1.4
}
.ix a:hover{color:var(--gold)}
.ix__n{flex:0 0 auto;font-variant-numeric:tabular-nums;font-size:11.5px;
  color:var(--gold-deep);letter-spacing:.06em;padding-top:3px}
.ix__t{flex:1 1 auto}
.ix__ts{flex:0 0 auto;font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums;padding-top:2px}

/* ---------- clip sections ---------- */
.clips{margin:0;padding:clamp(30px,5vw,46px) 0 0}
.clip{
  position:relative;
  display:grid;
  grid-template-columns:62px minmax(0,1fr);
  padding:clamp(28px,4.5vw,44px) 0;
  border-bottom:1px solid var(--line);
}
.clip:last-of-type{border-bottom:0}

/* the lecture spine: encodes position within a single 52-minute lecture */
.clip__rail{position:relative;grid-row:1 / span 2}
.clip__rail::before{
  content:"";position:absolute;left:5px;top:8px;bottom:-56px;width:1px;
  background:linear-gradient(180deg,var(--line-strong),var(--line) 60%,transparent);
}
.clip:last-of-type .clip__rail::before{bottom:20%}
.clip__tick{
  position:absolute;left:1px;top:7px;width:9px;height:9px;
  border:1px solid var(--gold);border-radius:50%;background:var(--ink);
}
.clip__time{
  position:absolute;left:22px;top:2px;
  font-size:11.5px;font-variant-numeric:tabular-nums;
  color:var(--gold-deep);letter-spacing:.05em;white-space:nowrap;
}

.clip__head{grid-column:2}
.clip__theme{
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin:0 0 9px
}
.clip h2{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(22px,3.1vw,29px);line-height:1.18;
  color:var(--gold-lite);margin:0;max-width:30ch;letter-spacing:-.003em
}
.clip__meta{
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;
  margin:11px 0 0;font-size:12.5px;color:var(--muted);
  font-variant-numeric:tabular-nums
}
.clip__meta a{font-size:12.5px;border-bottom-color:var(--line)}

.clip__body{
  grid-column:2;display:grid;
  grid-template-columns:264px minmax(0,1fr);
  gap:30px;margin-top:22px;align-items:start
}
.clip__player{position:relative}
.clip__player video{
  display:block;width:100%;aspect-ratio:9/16;height:auto;
  background:linear-gradient(160deg,#1a1509,#0d0a05);
  border:1px solid var(--line);border-radius:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.5)
}
.clip__text{min-width:0}
.blurb{margin:0;font-size:16.5px;line-height:1.6;color:var(--ivory)}

/* ---------- transcript: serif, because this is the speaker's voice ---------- */
.tx{margin:20px 0 0;border-top:1px solid var(--line)}
.tx summary{
  list-style:none;cursor:pointer;padding:11px 0 0;
  display:flex;align-items:center;gap:9px;
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:600;
}
.tx summary::-webkit-details-marker{display:none}
.tx summary::after{
  content:"";width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .2s ease
}
.tx[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.tx summary:hover{color:var(--gold)}
.tx summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:2px}
.tx__body{
  font-family:var(--serif);font-size:17px;line-height:1.72;
  color:#DCD3C2;padding:4px 0 6px 18px;margin-top:12px;
  border-left:1px solid var(--line-strong)
}
.tx__body p{margin:0 0 1.05em}
.tx__body p:last-child{margin-bottom:0}

/* ---------- books ---------- */
/* the .books h2 heading style is shared with .end h2, and lives in site.css */
.books{margin:clamp(40px,6vw,60px) 0 0;padding:30px 0 0;border-top:1px solid var(--line)}
.books p{margin:0 0 .95em;font-size:16px;color:#DCD3C2}
.books p:first-of-type{color:var(--muted);font-size:14.5px;margin-bottom:1.4em}
.books cite{font-style:italic;color:var(--ivory)}
.books strong{color:var(--ivory)}

/* ---------- more from this channel ---------- */
/* Deliberately the .ix visual language rather than the archive's cards: the
   cards live in archive.css, which lecture pages do not load, and a link list
   is the right weight for a closing block anyway. */
.more{
  margin:clamp(38px,6vw,56px) 0 0;padding:24px 0 4px;
  border-top:1px solid var(--line);
}
.more h2{
  font-family:var(--sans);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-deep);margin:0 0 10px;font-weight:600
}
.more ul{list-style:none;margin:0;padding:0;columns:2;column-gap:38px}
.more li{break-inside:avoid;margin:0 0 2px}
.more a{
  display:block;border:0;padding:6px 0;
  color:var(--ivory);font-size:14.5px;line-height:1.4
}
.more a:hover{color:var(--gold)}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .clip__body{grid-template-columns:1fr;gap:22px}
  .clip__player{max-width:264px}
  .ix ol,.more ul{columns:1}
}
@media (max-width:560px){
  .clip{grid-template-columns:1fr;padding-top:34px}
  .clip__rail{position:static;grid-row:auto}
  .clip__rail::before{display:none}
  .clip__tick{display:none}
  .clip__time{position:static;display:block;margin-bottom:8px}
  .clip__head,.clip__body{grid-column:1}
  .clip__player{max-width:100%}
}