/* STF_CONTENT_SHARED
   Design tokens + components reused by single.php and archive.php so they
   match the Stanford-inspired homepage (template-homepage-concept.php).
   Tokens here are kept identical to the ones scoped inside that template's
   own <style> block (same --stf-* names/values), just duplicated into a
   small sitewide file so single/archive can use them without loading the
   whole homepage markup. */

.stf-page {
  --stf-blue:#0F51C2; --stf-navy:#0F51C2; --stf-navy-2:#0A3D95; --stf-gold:#FAAF3B; --stf-ivory:#f7f8f9; --stf-text:#111111;
  --stf-font-serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --stf-font-sans: "Source Sans 3", "Source Sans 3 Fallback", "Helvetica Neue", helvetica, arial, sans-serif;
  color:var(--stf-text); font-family:var(--stf-font-sans); font-weight:400; line-height:1.4;
  overflow-x:hidden;
}
.stf-page * { box-sizing:border-box; max-width:100%; }
.stf-page p { font-family:var(--stf-font-sans); font-weight:400; line-height:1.6; }
.stf-page h1, .stf-page h2, .stf-page h3 { font-family:var(--stf-font-serif); font-weight:440; line-height:1.1; }
.stf-serif { font-family:var(--stf-font-serif); font-weight:440; line-height:1.1; }

/* ARTICLE HERO — single post header with featured image */
.stf-article-hero { position:relative; min-height:clamp(320px,54vh,480px); background:var(--stf-navy); overflow:hidden; }
.stf-article-hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.stf-article-hero-scrim {
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(8,17,42,.88) 0%, rgba(8,17,42,.45) 40%, rgba(8,17,42,.08) 65%),
    linear-gradient(0deg, rgba(8,17,42,.75) 0%, rgba(8,17,42,0) 50%);
}
.stf-article-hero-content { position:relative; z-index:2; height:100%; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; max-width:760px; padding:clamp(24px,5vw,48px) clamp(20px,6vw,64px) clamp(36px,6vw,56px); }
.stf-article-hero-content .breadcrumb, .stf-article-hero-content .breadcrumb a { color:rgba(255,255,255,.85); }
.stf-article-title-box { background:#ffffff; border-left:8px solid var(--stf-blue); padding:clamp(14px,2.4vw,22px) clamp(20px,3.2vw,28px); max-width:100%; }
.stf-article-eyebrow { font-family:var(--stf-font-sans); font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--stf-blue); text-transform:uppercase; margin-bottom:8px; }
.stf-article-title-box h1 { font-size:clamp(24px,4vw,42px) !important; line-height:1.2 !important; margin:0; font-weight:500 !important; color:#111111 !important; font-family:var(--stf-font-serif) !important; overflow-wrap:break-word; word-break:break-word; }
.stf-article-date { margin-top:10px; font-size:13px; color:#555; font-family:var(--stf-font-sans); }

/* Flat fallback header — used when the post has no featured image */
.stf-article-hero-flat { background:var(--stf-navy); min-height:auto; }
.stf-article-hero-content-flat { max-width:900px; padding:clamp(40px,7vw,72px) clamp(20px,6vw,64px); align-items:flex-start; }
.stf-article-hero-content-flat .breadcrumb, .stf-article-hero-content-flat .breadcrumb a { color:rgba(255,255,255,.85); }
.stf-article-eyebrow-flat { color:var(--stf-gold) !important; }
.stf-article-title-flat { color:#fff !important; font-size:clamp(28px,4.5vw,46px) !important; margin:10px 0 0 !important; overflow-wrap:break-word; word-break:break-word; }
.stf-article-date-flat { color:rgba(255,255,255,.75) !important; margin-top:12px; }

/* ARTICLE BODY */
.stf-article-body { max-width:760px; margin:0 auto; padding:clamp(40px,6vw,64px) clamp(20px,6vw,24px) clamp(56px,8vw,80px); font-size:17px; line-height:1.7; }
.stf-article-body p { margin:0 0 1.3em; }
.stf-article-body h2 { font-size:clamp(22px,3.2vw,30px) !important; margin:1.6em 0 .6em; }
.stf-article-body h3 { font-size:clamp(19px,2.6vw,24px) !important; margin:1.4em 0 .5em; }
.stf-article-body img { max-width:100%; height:auto; border-radius:8px; }
.stf-article-body figure { margin:1.6em 0; }
.stf-article-body blockquote { margin:1.6em 0; padding:4px 0 4px 24px; border-left:4px solid var(--stf-gold); font-style:italic; color:#333; }
.stf-article-body a { color:var(--stf-blue); text-decoration:underline; text-underline-offset:2px; }
.stf-article-body ul, .stf-article-body ol { padding-left:1.4em; margin:0 0 1.3em; }

.stf-article-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:40px; }
.stf-tag-pill { font-size:13px; background:var(--stf-ivory); border:1px solid #e3e7ef; color:#44495a; padding:6px 14px; border-radius:999px; text-decoration:none !important; }
.stf-tag-pill:hover { border-color:var(--stf-blue); color:var(--stf-blue); }

.stf-article-footer-nav { margin-top:40px; border-top:1px solid #e3e7ef; padding-top:24px; }
.stf-back-link { display:inline-block; color:var(--stf-blue); font-weight:700; font-size:15px; text-decoration:underline; text-underline-offset:3px; }
.stf-back-link:hover { color:var(--stf-navy-2); }

/* ARCHIVE HEADER */
.stf-archive-head { text-align:center; max-width:720px; margin:0 auto; padding:clamp(48px,8vw,80px) clamp(20px,6vw,24px) clamp(24px,4vw,32px); }
.stf-archive-head h1 { font-size:clamp(28px,5vw,46px) !important; margin:0 0 clamp(10px,2vw,16px); font-weight:440 !important; line-height:1.1 !important; }
.stf-archive-desc { font-size:clamp(14px,1.8vw,18px); color:#44495a; line-height:1.4; }

/* POST GRID (archive) — mirrors the homepage's .stf-news-card look */
.stf-post-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(20px,3vw,32px); max-width:1300px; margin:0 auto; padding:0 clamp(20px,6vw,24px) clamp(56px,8vw,80px); }
.stf-post-card { text-decoration:none; color:inherit; display:block; min-width:0; }
.stf-post-card .thumb { aspect-ratio:16/10; border-radius:8px; overflow:hidden; margin-bottom:14px; background:#eef1f6; }
.stf-post-card .thumb img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.stf-post-card:hover .thumb img { transform:scale(1.04); }
.stf-post-card .thumb-placeholder { width:100%; height:100%; background:linear-gradient(145deg,var(--stf-blue),var(--stf-navy-2)); }
.stf-post-card .eyebrow { font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--stf-blue); text-transform:uppercase; margin-bottom:6px; }
.stf-post-card h3 { font-size:clamp(17px,2.2vw,21px) !important; margin:0 0 6px; font-weight:440 !important; line-height:1.2 !important; }
.stf-post-card .date { font-size:12px; color:#8992a8; text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; font-family:var(--stf-font-sans); }
.stf-post-card .excerpt { font-size:14px; color:#555; line-height:1.5; margin:0; }

.stf-no-posts { text-align:center; padding:60px 20px; color:#666; }

/* PAGINATION */
.stf-page nav.pagination,
.stf-page .ast-pagination,
.stf-page .navigation.pagination { max-width:1300px; margin:0 auto; padding:0 clamp(20px,6vw,24px) 60px; text-align:center; }
.stf-page .page-numbers { display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; margin:0 4px; padding:0 10px; border-radius:6px; font-size:14px; font-weight:600; color:var(--stf-text); text-decoration:none; background:var(--stf-ivory); }
.stf-page .page-numbers.current { background:var(--stf-blue); color:#fff; }
.stf-page a.page-numbers:hover { background:#e3e7ef; }
.stf-page .page-numbers.dots { background:transparent; }

@media (max-width: 600px) {
  .stf-article-body { font-size:16px; }
}