/* ======================================================================
   HUMINT theme — single research post (article) view.
   Layout for the listing + shared chrome comes from /hd-v1.css and
   /research.css; this file only adds the single-post reading view.
   All values reuse the design tokens defined in hd-v1.css.
   ====================================================================== */

.post-full{
  max-width:760px;
  margin:0 auto;
  padding:88px 22px 120px;
}

.post-full .back-link{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--text-2);
  margin-bottom:40px; transition:color .15s;
}
.post-full .back-link:hover{color:var(--gold-2)}
.post-full .back-link .arr{display:inline-block; transition:transform .2s}
.post-full .back-link:hover .arr{transform:translateX(-3px)}

.post-full .post-date{
  display:block;
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--text-2);
  margin-bottom:16px;
}

.post-full-title{
  font-family:var(--serif);
  font-size:clamp(34px,5vw,52px); line-height:1.06;
  color:var(--text); margin:0 0 14px;
}

.post-full .post-author{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-2); margin:0 0 34px;
}

.post-full-image{margin:16px 0 44px}
.post-full-image img{
  width:100%; border:1px solid var(--line-soft); border-radius:4px;
}

/* featured video from the post's "Video" field (see item.html.twig).
   aspect-ratio lives on the wrapper (reliable) and the iframe fills it. */
.post-full-video{
  position:relative; width:100%; aspect-ratio:16/9;
  margin:16px 0 44px; border-radius:4px; overflow:hidden;
}
.post-full-video iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

/* ---------- article body ---------- */
.post-full-body{font-size:17px; line-height:1.7; color:var(--text-2)}
.post-full-body > *:first-child{margin-top:0}
.post-full-body h2{font-family:var(--serif); font-size:30px; line-height:1.2; color:var(--text); margin:48px 0 14px}
.post-full-body h3{font-family:var(--serif); font-size:23px; line-height:1.25; color:var(--text); margin:36px 0 12px}
.post-full-body p{margin:0 0 1.3em; max-width:none}
.post-full-body a{color:var(--gold-2); text-decoration:underline; text-underline-offset:2px}
.post-full-body a:hover{color:var(--gold)}
.post-full-body strong{color:var(--text); font-weight:600}
.post-full-body img{max-width:100%; border-radius:4px; margin:26px 0}
.post-full-body ul, .post-full-body ol{padding-left:1.25em; margin:0 0 1.3em}
.post-full-body li{margin:0 0 .5em}
.post-full-body blockquote{
  border-left:2px solid var(--gold); margin:30px 0; padding:6px 0 6px 24px;
  color:var(--text); font-family:var(--serif); font-style:italic; font-size:22px; line-height:1.4;
}
.post-full-body blockquote p{margin:0}
.post-full-body code{
  font-family:var(--mono); background:var(--panel); border:1px solid var(--line-soft);
  padding:.08em .38em; border-radius:3px; font-size:.88em;
}
.post-full-body pre{
  background:var(--panel); border:1px solid var(--line-soft); border-radius:5px;
  padding:18px 20px; overflow-x:auto; margin:26px 0;
}
.post-full-body pre code{background:none; border:0; padding:0}
.post-full-body hr{border:0; border-top:1px solid var(--line-soft); margin:40px 0}

/* embedded video — a YouTube/Vimeo <iframe> pasted into the post body renders
   responsively at 16:9 regardless of the width/height on the pasted code. */
.post-full-body iframe{
  display:block; width:100%; aspect-ratio:16/9; height:auto;
  border:0; border-radius:4px; margin:28px 0;
}

@media (max-width:680px){
  .post-full{padding:64px 22px 90px}
  .post-full-body{font-size:16px}
}