/* Teaching Firsties: article design (posts and pages). */

/* ---------- header band ---------- */
.tf-article-band{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--ltblue-soft) 0%,#F4F9FD 70%,#fff 100%);padding-block:clamp(32px,5vw,64px) clamp(84px,10vw,150px)!important;margin-block:0!important}
.tf-article-band::before,.tf-article-band::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.tf-article-band::before{width:360px;height:360px;background:var(--yellow-soft);right:-110px;top:-150px}
.tf-article-band::after{width:190px;height:190px;background:#DDEBF7;left:-70px;bottom:40px}
.tf-article-band>*{position:relative;z-index:1}
.tf-article-band .wp-block-post-terms{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;justify-content:center}
.tf-article-band .wp-block-post-terms a{display:inline-block;background:#fff;color:var(--ltblue-ink);border:1px solid #D3E3F2;border-radius:999px;padding:5px 12px;text-decoration:none}
.tf-article-band .wp-block-post-terms a:hover{background:var(--ltblue-ink);color:#fff;border-color:var(--ltblue-ink)}
.tf-article-band .wp-block-post-terms__separator{display:none}
.tf-article-band h1{text-align:center;font-size:clamp(2rem,4.6vw,3.25rem)!important;line-height:1.1!important;letter-spacing:-.025em;margin:16px auto 18px!important;max-width:900px;text-wrap:balance}
.tf-article-band .tf-byline{justify-content:center}
.tf-byline{display:flex;align-items:center;gap:8px 12px;color:var(--ink-3);font-size:14.5px;flex-wrap:wrap}
.tf-byline>*{margin:0!important}
.tf-byline .wp-block-image img{width:40px!important;height:40px!important;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 8px rgba(26,26,46,.15)}
.tf-byline strong{color:var(--ink)}
.tf-byline .wp-block-post-date::before,.tf-byline .tf-readtime::before{content:"•";margin-right:10px;color:#B7C3D1}
.tf-feature{margin-top:calc(-1 * clamp(70px,9vw,130px))!important;position:relative;z-index:2}
.tf-feature img{border-radius:var(--r-lg)!important;box-shadow:0 30px 60px -30px rgba(26,26,46,.45);border:6px solid #fff;background:#fff}

/* ---------- body typography ---------- */
.tf-article .wp-block-post-content{font-size:1.075rem;line-height:1.75;color:var(--ink-2)}
.tf-article .wp-block-post-content>*{margin-block-start:1.15em}
.tf-article .wp-block-post-content>p:first-child,.tf-article .wp-block-post-content>p:first-of-type{font-size:1.24rem;line-height:1.65;color:var(--ink)}
.tf-article .wp-block-post-content strong{color:var(--ink)}
.tf-article .wp-block-post-content a:not(.wp-block-button__link){color:var(--ltblue-ink);text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:#B9D5EE}
.tf-article .wp-block-post-content a:not(.wp-block-button__link):hover{text-decoration-color:var(--ltblue-ink)}
.tf-article .wp-block-post-content h2{position:relative;margin-block-start:2.4em!important;padding-top:22px;font-size:clamp(1.6rem,2.8vw,2.05rem)!important;line-height:1.2;letter-spacing:-.015em;color:var(--ink);scroll-margin-top:110px}
.tf-article .wp-block-post-content h2::before{content:"";position:absolute;left:0;top:0;width:56px;height:7px;border-radius:99px;background:linear-gradient(90deg,var(--red) 0 20%,var(--orange) 20% 40%,var(--yellow) 40% 60%,var(--green) 60% 80%,var(--ltblue) 80%)}
.tf-article .wp-block-post-content h3{margin-block-start:1.8em!important;font-size:1.3rem!important;line-height:1.3;color:var(--ink)}
.tf-article .wp-block-post-content h4{margin-block-start:1.5em!important;font-size:1.08rem!important;color:var(--ltblue-ink)}

/* lists */
.tf-article .wp-block-post-content ul.wp-block-list{list-style:none;padding-left:0}
.tf-article .wp-block-post-content ul.wp-block-list>li{position:relative;padding-left:1.7em;margin-bottom:.5em}
.tf-article .wp-block-post-content ul.wp-block-list>li::before{content:"";position:absolute;left:.25em;top:.62em;width:.62em;height:.62em;border-radius:50%;background:var(--ltblue);box-shadow:0 0 0 3px var(--ltblue-soft)}
.tf-article .wp-block-post-content ol.wp-block-list{list-style:none;padding-left:0;counter-reset:tf}
.tf-article .wp-block-post-content ol.wp-block-list>li{position:relative;padding-left:2.4em;margin-bottom:.7em;counter-increment:tf}
.tf-article .wp-block-post-content ol.wp-block-list>li::before{content:counter(tf);position:absolute;left:0;top:.1em;width:1.75em;height:1.75em;border-radius:50%;background:var(--ltblue-ink);color:#fff;font-weight:700;font-size:.85em;display:grid;place-items:center;line-height:1}
.tf-article .wp-block-post-content li ul,.tf-article .wp-block-post-content li ol{margin-top:.4em;padding-left:1.2em;list-style:disc}
.tf-article .wp-block-post-content ul.tf-list-bold{display:grid;gap:10px}
.tf-article .wp-block-post-content ul.tf-list-bold>li{background:var(--light);border:1px solid var(--line);border-left:5px solid var(--ltblue);border-radius:12px;padding:12px 16px;margin:0}
.tf-article .wp-block-post-content ul.tf-list-bold>li::before{display:none}
.tf-article .wp-block-post-content ul.tf-list-bold>li:nth-child(5n+2){border-left-color:var(--green)}
.tf-article .wp-block-post-content ul.tf-list-bold>li:nth-child(5n+3){border-left-color:var(--orange)}
.tf-article .wp-block-post-content ul.tf-list-bold>li:nth-child(5n+4){border-left-color:var(--red)}
.tf-article .wp-block-post-content ul.tf-list-bold>li:nth-child(5n+5){border-left-color:var(--yellow)}

/* ---------- images ---------- */
.tf-article .wp-block-post-content .wp-block-image{margin-inline:auto}
.tf-article .wp-block-post-content .wp-block-image img,.tf-article .wp-block-post-content .wp-block-media-text__media img{border-radius:18px;box-shadow:0 18px 40px -24px rgba(26,26,46,.45);display:block;height:auto;max-width:100%}
.tf-article .wp-block-post-content>.wp-block-image{max-width:100%}
.tf-article .wp-block-post-content>.wp-block-image.tf-img-square{max-width:560px}
.tf-article .wp-block-post-content>.wp-block-image.tf-img-portrait{max-width:440px}
.tf-crop .wp-block-media-text__media,.wp-block-image.tf-crop{overflow:hidden;border-radius:18px;box-shadow:0 18px 40px -24px rgba(26,26,46,.45)}
.tf-crop .wp-block-media-text__media img,.wp-block-image.tf-crop img{transform:scale(1.045);box-shadow:none!important;border-radius:0!important}
.wp-block-image.tf-crop{width:fit-content}
.tf-article .wp-block-post-content figcaption{text-align:center;font-size:.88rem;color:var(--ink-3)}

/* gallery */
.tf-article .wp-block-gallery.tf-gallery{gap:14px!important}
.tf-article .wp-block-gallery.tf-gallery .wp-block-image img{border-radius:14px;aspect-ratio:1;object-fit:cover}

/* ---------- image + text cards ---------- */
.tf-article .wp-block-media-text.tf-media{background:var(--light);border:1px solid var(--line);border-radius:26px;padding:clamp(16px,2.4vw,26px);gap:0;margin-block:1.8em!important}
.tf-article .wp-block-media-text.tf-media .wp-block-media-text__content{padding:4px clamp(4px,1.5vw,10px) 4px clamp(18px,3vw,32px)}
.tf-article .wp-block-media-text.tf-media.has-media-on-the-right .wp-block-media-text__content{padding:4px clamp(18px,3vw,32px) 4px clamp(4px,1.5vw,10px)}
.tf-article .wp-block-media-text .wp-block-media-text__content>:first-child{margin-top:0!important;padding-top:0}
.tf-article .wp-block-media-text .wp-block-media-text__content>:last-child{margin-bottom:0}
.tf-article .wp-block-media-text .wp-block-media-text__content>*{margin-block:.7em}
.tf-article .wp-block-media-text .wp-block-media-text__content h2{padding-top:0;margin-top:0!important}
.tf-article .wp-block-media-text .wp-block-media-text__content h2::before{display:none}
.tf-article .wp-block-media-text .wp-block-media-text__content h3{margin-top:0!important}
.tf-article .wp-block-post-content>.wp-block-media-text.tf-media:nth-of-type(3n+2){background:var(--ltblue-soft);border-color:#D6E6F4}
.tf-article .wp-block-post-content>.wp-block-media-text.tf-media:nth-of-type(3n+3){background:#FFFBEF;border-color:#F6E7B8}
.tf-article .tf-media--compact{background:#fff!important}

/* item lists (books, resources) */
.tf-article .tf-items{display:grid;gap:14px;margin-block:1.6em!important}
.tf-article .tf-items>*{margin:0!important;max-width:none!important}
.tf-article .tf-items .wp-block-media-text{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:0 2px 14px rgba(26,26,46,.05);transition:transform .15s,box-shadow .15s;gap:0}
.tf-article .tf-items .wp-block-media-text:hover{transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(26,26,46,.35)}
.tf-article .tf-items .wp-block-media-text__content{padding:2px 6px 2px 18px!important;font-size:1rem;line-height:1.6}
.tf-article .tf-items .has-media-on-the-right .wp-block-media-text__content{padding:2px 18px 2px 6px!important}
.tf-article .tf-items .wp-block-media-text__media img{border-radius:10px;box-shadow:0 8px 18px -10px rgba(26,26,46,.5)}
.tf-article .tf-items .wp-block-media-text__content p:first-child a:first-child{font-weight:700;font-size:1.06rem;color:var(--ink);text-decoration:none}
.tf-article .tf-items .wp-block-media-text__content p:first-child a:first-child:hover{color:var(--ltblue-ink)}
@media (min-width:601px){
  .tf-article .tf-items.is-grid{grid-template-columns:1fr 1fr;gap:16px}
  .tf-article .tf-items.is-grid .wp-block-media-text{display:flex!important;flex-direction:column;padding:0;overflow:hidden}
  .tf-article .tf-items.is-grid .wp-block-media-text__media{background:linear-gradient(180deg,var(--ltblue-soft),#fff);padding:20px 20px 4px;display:flex;justify-content:center;width:100%}
  .tf-article .tf-items.is-grid .wp-block-media-text__media img{height:220px!important;width:auto!important;max-width:100%;object-fit:contain}
  .tf-article .tf-items.is-grid .tf-crop .wp-block-media-text__media,.tf-article .tf-items.is-grid .wp-block-media-text.tf-crop .wp-block-media-text__media{overflow:visible;border-radius:0;box-shadow:none}
  .tf-article .tf-items.is-grid .tf-crop .wp-block-media-text__media img{transform:none;border-radius:10px!important;box-shadow:0 8px 18px -10px rgba(26,26,46,.5)!important}
  .tf-article .tf-items.is-grid .wp-block-media-text__content,.tf-article .tf-items.is-grid .has-media-on-the-right .wp-block-media-text__content{padding:14px 20px 20px!important}
  .tf-article .tf-items.is-grid .wp-block-media-text:nth-child(4n+2) .wp-block-media-text__media{background:linear-gradient(180deg,var(--yellow-soft),#fff)}
  .tf-article .tf-items.is-grid .wp-block-media-text:nth-child(4n+3) .wp-block-media-text__media{background:linear-gradient(180deg,var(--green-soft),#fff)}
  .tf-article .tf-items.is-grid .wp-block-media-text:nth-child(4n+4) .wp-block-media-text__media{background:linear-gradient(180deg,var(--red-soft),#fff)}
}
@media (max-width:600px){
  .tf-article .wp-block-media-text.is-stacked-on-mobile.tf-media .wp-block-media-text__content,
  .tf-article .wp-block-media-text.is-stacked-on-mobile.tf-media.has-media-on-the-right .wp-block-media-text__content{padding:18px 4px 4px!important}
  .tf-article .tf-items .wp-block-media-text.is-stacked-on-mobile{grid-template-columns:30% 1fr!important}
  .tf-article .tf-items .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media{grid-column:1;grid-row:1}
  .tf-article .tf-items .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content{grid-column:2;grid-row:1;padding:0 0 0 14px!important;font-size:.95rem}
}

/* ---------- callouts ---------- */
.tf-article .tf-callout{position:relative;border-radius:16px;padding:16px 18px 16px 60px!important;margin-block:1em!important;line-height:1.6}
.tf-article .tf-callout::before{position:absolute;left:16px;top:15px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px;color:#fff;line-height:1}
.tf-article .tf-callout strong:first-child{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px}
.tf-callout.is-problem{background:var(--red-soft)}
.tf-callout.is-problem::before{content:"!";background:var(--red)}
.tf-callout.is-problem strong:first-child{color:var(--red-ink)}
.tf-callout.is-solution{background:var(--green-soft)}
.tf-callout.is-solution::before{content:"✓";background:var(--green-ink)}
.tf-callout.is-solution strong:first-child{color:var(--green-ink)}
.tf-callout.is-tip{background:var(--yellow-soft)}
.tf-callout.is-tip::before{content:"★";background:var(--star)}
.tf-callout.is-tip strong:first-child{color:var(--yellow-ink)}
.tf-article .tf-fix{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-block:1.2em 1.6em!important}
.tf-article .tf-fix>*{margin:0!important;max-width:none!important}
@media (max-width:700px){.tf-article .tf-fix{grid-template-columns:1fr}}
.tf-article .tf-note{font-size:.9rem;color:var(--ink-3);font-style:italic;border-top:1px dashed var(--line);padding-top:10px}

/* ---------- contents box ---------- */
.tf-toc{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);margin-block:2em!important;overflow:hidden}
.tf-toc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;background:var(--ltblue-soft)}
.tf-toc summary::-webkit-details-marker{display:none}
.tf-toc summary::after{content:"";width:10px;height:10px;border-right:2.5px solid var(--ltblue-ink);border-bottom:2.5px solid var(--ltblue-ink);transform:rotate(45deg);transition:transform .2s;margin-left:auto}
.tf-toc details[open] summary::after{transform:rotate(-135deg)}
.tf-toc__title{font-weight:800;color:var(--ink);font-size:1.02rem}
.tf-toc__count{font-size:.8rem;color:var(--ltblue-ink);font-weight:600}
.tf-toc ol{list-style:none;margin:0;padding:14px 20px 18px;counter-reset:toc;columns:2;column-gap:28px}
.tf-toc li{counter-increment:toc;break-inside:avoid;padding:5px 0 5px 32px;position:relative;font-size:.95rem;line-height:1.4}
.tf-toc li::before{content:counter(toc);position:absolute;left:0;top:4px;width:22px;height:22px;border-radius:7px;background:var(--light);border:1px solid var(--line);font-size:.75rem;font-weight:700;color:var(--ltblue-ink);display:grid;place-items:center}
.tf-toc a{color:var(--ink-2)!important;text-decoration:none!important}
.tf-toc a:hover{color:var(--ltblue-ink)!important}
@media (max-width:700px){.tf-toc ol{columns:1}}

/* ---------- misc ---------- */
.tf-article .wp-block-post-content>.tf-optin{max-width:var(--wp--style--global--content-size)!important;margin-inline:auto!important}
.tf-article .wp-block-post-content .wp-block-buttons{margin-block:1.2em}
.tf-article .wp-block-post-content .wp-block-separator.is-style-dots{border:0;text-align:center;color:var(--ltblue)}
.tf-article .wp-block-post-content .wp-block-table table{border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;width:100%}
.tf-article .wp-block-post-content .wp-block-table td,.tf-article .wp-block-post-content .wp-block-table th{border:0;border-bottom:1px solid var(--line);padding:10px 14px}
.tf-article .wp-block-post-content .wp-block-table tr:nth-child(odd) td{background:var(--light)}
.tf-article .wp-block-post-content blockquote{border-left:5px solid var(--yellow)!important;background:var(--yellow-soft);padding:16px 20px;border-radius:0 16px 16px 0;font-size:1.1rem}
.tf-article .wp-block-embed{margin-block:1.6em}
.tf-article .wp-block-embed iframe{border-radius:18px}
.tf-article .wp-block-media-text .tf-fix{grid-template-columns:1fr;gap:10px}
.tf-article .wp-block-media-text .tf-callout{padding:12px 14px 12px 52px!important}
.tf-article .wp-block-media-text .tf-callout::before{left:12px;top:12px;width:28px;height:28px}
.tf-article .wp-block-post-content .has-num{display:flex;align-items:flex-start;gap:14px}
.tf-article .wp-block-post-content h2.has-num::before{display:none}
.tf-article .wp-block-post-content h2.has-num{padding-top:0}
.tf-h-num{flex:none;font-size:0!important;display:inline-flex;align-items:center;justify-content:center;line-height:1;width:1.55em;height:1.55em;margin-top:-.08em;border-radius:14px;background:var(--ltblue-ink);box-shadow:0 6px 0 -1px #1D4F7C}
.tf-h-num::before{content:attr(data-n);font-size:clamp(1.1rem,2vw,1.35rem);color:#fff;font-weight:800;line-height:1}
h2 .tf-h-num{font-size:0!important;width:48px;height:48px}
h3 .tf-h-num{width:34px;height:34px;border-radius:10px;background:var(--orange);box-shadow:0 4px 0 -1px var(--orange-ink)}
h3 .tf-h-num::before{font-size:1rem}
.tf-article .wp-block-post-content h2.has-num:nth-of-type(4n+2) .tf-h-num{background:var(--red);box-shadow:0 6px 0 -1px var(--red-ink)}
.tf-article .wp-block-post-content h2.has-num:nth-of-type(4n+3) .tf-h-num{background:var(--green-ink);box-shadow:0 6px 0 -1px #35591A}
.tf-article .wp-block-post-content h2.has-num:nth-of-type(4n+4) .tf-h-num{background:var(--orange);box-shadow:0 6px 0 -1px var(--orange-ink)}
.tf-article .tf-kicker{font-size:.8rem!important;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--yellow-ink);margin-bottom:-.3em!important}