.wtfto-tvn-section{margin:34px auto;padding:24px;background:#fff;color:#111;border:1px solid rgba(0,0,0,.1);box-sizing:border-box}.wtfto-tvn-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px}.wtfto-tvn-kicker{margin:0 0 6px;color:#d71920;text-transform:uppercase;font-weight:800;letter-spacing:.08em;font-size:.78rem}.wtfto-tvn-section h2{margin:0;font-size:clamp(1.8rem,3vw,3rem);line-height:.95;text-transform:uppercase;letter-spacing:-.04em}.wtfto-tvn-section-head p:last-child{margin:8px 0 0;font-weight:650}.wtfto-tvn-view-all{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;background:#d71920;color:#fff!important;text-decoration:none;font-weight:800;text-transform:uppercase;white-space:nowrap}.wtfto-tvn-scroll{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px}.wtfto-tvn-layout-grid .wtfto-tvn-scroll{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));overflow:visible}.wtfto-tvn-card{flex:0 0 285px;scroll-snap-align:start;background:#f6f6f6;border:1px solid rgba(0,0,0,.12)}.wtfto-tvn-card-link{display:block;color:inherit!important;text-decoration:none!important;height:100%}.wtfto-tvn-image{position:relative;min-height:165px;background:#222 center/cover no-repeat;filter:grayscale(1);overflow:hidden}.wtfto-tvn-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.45))}.wtfto-tvn-badge{position:absolute;left:10px;bottom:10px;z-index:1;background:#d71920;color:#fff;font-size:.72rem;font-weight:900;padding:6px 8px;text-transform:uppercase;letter-spacing:.06em}.wtfto-tvn-card-body{padding:14px}.wtfto-tvn-region{display:inline-block;margin-bottom:8px;color:#d71920;font-weight:900;text-transform:uppercase;font-size:.75rem;letter-spacing:.08em}.wtfto-tvn-card h3{margin:0 0 8px;font-size:1.25rem;line-height:1.05}.wtfto-tvn-card p{margin:0;font-size:.95rem;line-height:1.35}.wtfto-tvn-empty{padding:18px;border:1px dashed rgba(0,0,0,.35);display:flex;flex-direction:column;gap:4px}.wtfto-tvn-article{max-width:980px;margin:0 auto;padding:28px 18px}.wtfto-tvn-article .wtfto-tvn-title{font-size:clamp(2.2rem,6vw,5rem);line-height:.9;letter-spacing:-.06em;text-transform:uppercase;margin:0 0 16px}.wtfto-tvn-article .wtfto-tvn-deck{font-size:1.15rem;font-weight:650;margin-bottom:24px}.wtfto-tvn-hero{margin:0 0 1.4rem}.wtfto-tvn-hero img{display:block;width:100%;height:auto}.wtfto-tvn-hero-caption{display:block;margin-top:8px;font-size:.78rem;line-height:1.35;color:rgba(0,0,0,.62);letter-spacing:.01em}.wtfto-tvn-article-label{display:inline-block;background:#d71920;color:#fff;padding:7px 10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px}.wtfto-tvn-content{font-size:1.05rem;line-height:1.65}.wtfto-tvn-content h2{border-left:6px solid #d71920;padding-left:12px;text-transform:uppercase;letter-spacing:-.02em}.wtfto-then-vs-now-page.dark-mode .wtfto-tvn-section,.dark-mode .wtfto-tvn-section,body.dark .wtfto-tvn-section{background:#050505;color:#fff;border-color:rgba(255,255,255,.16)}.wtfto-then-vs-now-page.dark-mode .wtfto-tvn-card,.dark-mode .wtfto-tvn-card,body.dark .wtfto-tvn-card{background:#111;border-color:rgba(255,255,255,.16)}@media (max-width:700px){.wtfto-tvn-section{padding:18px;margin:24px auto}.wtfto-tvn-section-head{align-items:flex-start;flex-direction:column}.wtfto-tvn-card{flex-basis:82vw}.wtfto-tvn-view-all{width:100%}}

/* v0.1.1 inline image wrap for THEN vs NOW article bodies */
@media (min-width:900px){
.wtfto-tvn-content{overflow:visible!important;}
.wtfto-tvn-content img.alignleft,.wtfto-tvn-content figure.alignleft,.wtfto-tvn-content .wp-caption.alignleft,.wtfto-tvn-content .wtfto-tvn-inline-media.alignleft{float:left!important;display:block!important;width:auto!important;max-width:42%!important;height:auto!important;margin:.35rem 1.45rem 1rem 0!important;clear:none!important;}
.wtfto-tvn-content img.alignright,.wtfto-tvn-content figure.alignright,.wtfto-tvn-content .wp-caption.alignright,.wtfto-tvn-content .wtfto-tvn-inline-media.alignright{float:right!important;display:block!important;width:auto!important;max-width:42%!important;height:auto!important;margin:.35rem 0 1rem 1.45rem!important;clear:none!important;}
.wtfto-tvn-content .wtfto-tvn-inline-media.alignleft img,.wtfto-tvn-content .wtfto-tvn-inline-media.alignright img,.wtfto-tvn-content figure.alignleft img,.wtfto-tvn-content figure.alignright img,.wtfto-tvn-content .wp-caption.alignleft img,.wtfto-tvn-content .wp-caption.alignright img{display:block!important;max-width:100%!important;width:100%!important;height:auto!important;}
.wtfto-tvn-content p{overflow:visible!important;}
.wtfto-tvn-content:after{content:"";display:table;clear:both;}
}
@media (max-width:899px){
.wtfto-tvn-content img.alignleft,.wtfto-tvn-content img.alignright,.wtfto-tvn-content figure.alignleft,.wtfto-tvn-content figure.alignright,.wtfto-tvn-content .wp-caption.alignleft,.wtfto-tvn-content .wp-caption.alignright,.wtfto-tvn-content .wtfto-tvn-inline-media.alignleft,.wtfto-tvn-content .wtfto-tvn-inline-media.alignright{float:none!important;display:block!important;width:100%!important;max-width:100%!important;margin:1rem auto!important;}
}


/* v0.1.2: magazine-style image labels */
.wtfto-tvn-content .wtfto-magazine-image{box-sizing:border-box}
.wtfto-tvn-content .wtfto-magazine-image img{display:block;max-width:100%;height:auto}
.wtfto-tvn-content .wtfto-magazine-caption{display:block;margin-top:4px;font-size:.68rem;line-height:1.25;color:rgba(0,0,0,.58);font-style:normal;letter-spacing:.01em}
.wtfto-tvn-content .wtfto-image-caption-main,.wtfto-tvn-content .wtfto-image-caption-source{display:block}
.wtfto-tvn-content .wtfto-image-caption-main{font-weight:650}
.wtfto-tvn-content .wtfto-image-caption-source{opacity:.82}
.wtfto-then-vs-now-page.dark-mode .wtfto-tvn-content .wtfto-magazine-caption,.dark-mode .wtfto-tvn-content .wtfto-magazine-caption,body.dark .wtfto-tvn-content .wtfto-magazine-caption{color:rgba(255,255,255,.64)}


/* v0.4.3: hard desktop magazine wrap for THEN vs NOW body images, matching the B-site behaviour */
@media (min-width:900px){
  .wtfto-tvn-content figure.wp-block-image.alignleft,
  .wtfto-tvn-content figure.alignleft,
  .wtfto-tvn-content .wp-caption.alignleft,
  .wtfto-tvn-content img.alignleft,
  .wtfto-tvn-content .wtfto-tvn-auto-wrap,
  .wtfto-tvn-content .wtfto-tvn-inline-media.alignleft,
  .wtfto-tvn-content .wtfto-magazine-image.alignleft{
    float:left!important;
    clear:none!important;
    display:block!important;
    width:auto!important;
    max-width:min(42%,360px)!important;
    height:auto!important;
    margin:.35rem 1.45rem 1rem 0!important;
  }
  .wtfto-tvn-content figure.wp-block-image.alignright,
  .wtfto-tvn-content figure.alignright,
  .wtfto-tvn-content .wp-caption.alignright,
  .wtfto-tvn-content img.alignright,
  .wtfto-tvn-content .wtfto-tvn-inline-media.alignright,
  .wtfto-tvn-content .wtfto-magazine-image.alignright{
    float:right!important;
    clear:none!important;
    display:block!important;
    width:auto!important;
    max-width:min(42%,360px)!important;
    height:auto!important;
    margin:.35rem 0 1rem 1.45rem!important;
  }
  .wtfto-tvn-content figure.alignleft img,
  .wtfto-tvn-content figure.alignright img,
  .wtfto-tvn-content .wp-caption.alignleft img,
  .wtfto-tvn-content .wp-caption.alignright img,
  .wtfto-tvn-content img.alignleft,
  .wtfto-tvn-content img.alignright{
    max-width:100%!important;
    height:auto!important;
  }
  .wtfto-tvn-content p,
  .wtfto-tvn-content .wp-block-paragraph{
    clear:none!important;
    overflow:visible!important;
  }
  .wtfto-tvn-content:after{
    content:"";
    display:table;
    clear:both;
  }
}
@media (max-width:899px){
  .wtfto-tvn-content figure.wp-block-image.alignleft,
  .wtfto-tvn-content figure.wp-block-image.alignright,
  .wtfto-tvn-content figure.alignleft,
  .wtfto-tvn-content figure.alignright,
  .wtfto-tvn-content .wp-caption.alignleft,
  .wtfto-tvn-content .wp-caption.alignright,
  .wtfto-tvn-content img.alignleft,
  .wtfto-tvn-content img.alignright,
  .wtfto-tvn-content .wtfto-tvn-auto-wrap,
  .wtfto-tvn-content .wtfto-tvn-inline-media.alignleft,
  .wtfto-tvn-content .wtfto-tvn-inline-media.alignright,
  .wtfto-tvn-content .wtfto-magazine-image.alignleft,
  .wtfto-tvn-content .wtfto-magazine-image.alignright{
    float:none!important;
    clear:both!important;
    display:block!important;
    width:auto!important;
    max-width:100%!important;
    margin:1rem auto!important;
  }
}


/* v0.4.6: automatic bottom back button for all THEN vs NOW single stories */
.wtfto-tvn-back-nav{
  clear:both;
  margin:2.25rem 0 1rem;
  padding-top:1.25rem;
  border-top:1px solid rgba(255,255,255,.14);
}
.wtfto-tvn-back-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  padding:.78rem 1.05rem;
  border-radius:999px;
  background:#d71920;
  color:#fff!important;
  font-weight:800;
  letter-spacing:.02em;
  text-decoration:none!important;
  text-transform:uppercase;
  box-shadow:0 10px 22px rgba(0,0,0,.24);
}
.wtfto-tvn-back-button:hover,.wtfto-tvn-back-button:focus{
  background:#f0262d;
  color:#fff!important;
  transform:translateY(-1px);
}
@media (max-width:700px){
  .wtfto-tvn-back-button{width:100%;}
}


/* v0.4.7: extra-force red pill style in case theme CSS overrides plugin CSS */
.single-then_now .wtfto-tvn-back-nav a.wtfto-tvn-back-button,
body .wtfto-tvn-back-nav a.wtfto-tvn-back-button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:.85rem 1.15rem!important;
  border-radius:999px!important;
  background:#d71920!important;
  color:#fff!important;
  font-weight:900!important;
  text-decoration:none!important;
  text-transform:uppercase!important;
  border:0!important;
  box-shadow:0 10px 22px rgba(0,0,0,.25)!important;
}
.single-then_now .wtfto-tvn-back-nav a.wtfto-tvn-back-button:hover,
body .wtfto-tvn-back-nav a.wtfto-tvn-back-button:hover{
  background:#f0262d!important;
  color:#fff!important;
}


/* v0.5.2 dark-mode archive fix: dark panel, visible real images */
html[data-theme="dark"] body.wtfto-then-vs-now-page,
html[data-theme="dark"] body.post-type-archive-then_now{background:#101215!important;}
html[data-theme="dark"] .wtfto-tvn-section{
  background:linear-gradient(180deg,#202126 0%,#17191d 100%)!important;
  color:#f4f1ec!important;
  border:1px solid #30343b!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .wtfto-tvn-section-head,
html[data-theme="dark"] .wtfto-tvn-section-head > div,
html[data-theme="dark"] .wtfto-tvn-scroll{background:transparent!important;color:inherit!important;}
html[data-theme="dark"] .wtfto-tvn-section h2,
html[data-theme="dark"] .wtfto-tvn-title,
html[data-theme="dark"] .wtfto-tvn-section-head h2,
html[data-theme="dark"] .wtfto-tvn-card h3,
html[data-theme="dark"] .wtfto-tvn-card h3 a{color:#fff!important;}
html[data-theme="dark"] .wtfto-tvn-section-head p:last-child,
html[data-theme="dark"] .wtfto-tvn-deck,
html[data-theme="dark"] .wtfto-tvn-card p,
html[data-theme="dark"] .wtfto-tvn-empty,
html[data-theme="dark"] .wtfto-tvn-content,
html[data-theme="dark"] .wtfto-tvn-content p,
html[data-theme="dark"] .wtfto-tvn-content li{color:#d8d2cb!important;}
html[data-theme="dark"] .wtfto-tvn-card,
html[data-theme="dark"] .wtfto-tvn-card-link,
html[data-theme="dark"] .wtfto-tvn-card-body{background:#1a1d22!important;color:#f4f1ec!important;border-color:#30343b!important;box-shadow:none!important;}
.wtfto-tvn-card-img{display:block!important;width:100%!important;height:165px!important;object-fit:cover!important;object-position:center center!important;filter:grayscale(1)!important;}
.wtfto-tvn-image{background:#111 center/cover no-repeat!important;filter:none!important;min-height:165px!important;overflow:hidden!important;}
html[data-theme="dark"] .wtfto-tvn-image:after{background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.28))!important;}
html[data-theme="dark"] .wtfto-tvn-card-img{filter:grayscale(1) contrast(1.04)!important;opacity:.9!important;}
html[data-theme="dark"] .wtfto-tvn-region{color:#ff4c4c!important;background:transparent!important;}
html[data-theme="dark"] .wtfto-tvn-view-all{background:#d71920!important;color:#fff!important;border:1px solid #a80f15!important;}
html[data-theme="dark"] .wtfto-tvn-view-all:hover,
html[data-theme="dark"] .wtfto-tvn-view-all:focus{background:#b8141b!important;color:#fff!important;}


/* v0.5.3 softer dark-mode cleanup: remove boxes, borders, and divider lines */
html[data-theme="dark"] .wtfto-tvn-section{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding-left:0!important;
  padding-right:0!important;
}
html[data-theme="dark"] .wtfto-tvn-section-head,
html[data-theme="dark"] .wtfto-tvn-scroll,
html[data-theme="dark"] .wtfto-tvn-layout-grid .wtfto-tvn-scroll,
html[data-theme="dark"] .wtfto-tvn-layout-scroll .wtfto-tvn-scroll{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .wtfto-tvn-card,
html[data-theme="dark"] .wtfto-tvn-card-link,
html[data-theme="dark"] .wtfto-tvn-card-body,
html[data-theme="dark"] .wtfto-tvn-empty{
  background:#171a20!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .wtfto-tvn-image,
html[data-theme="dark"] .wtfto-tvn-card-img{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .wtfto-tvn-back-nav{
  border-top:0!important;
}
html[data-theme="dark"] .wtfto-tvn-view-all{
  border:0!important;
  box-shadow:none!important;
}


/* v0.5.4 archive line-killer: remove all remaining border lines in dark mode */
html[data-theme="dark"] .wtfto-tvn-article,
html[data-theme="dark"] .wtfto-tvn-article *{
  box-shadow:none!important;
}
html[data-theme="dark"] .wtfto-tvn-article,
html[data-theme="dark"] .wtfto-tvn-article-label,
html[data-theme="dark"] .wtfto-tvn-title,
html[data-theme="dark"] .wtfto-tvn-deck,
html[data-theme="dark"] .wtfto-tvn-kicker,
html[data-theme="dark"] .wtfto-tvn-section,
html[data-theme="dark"] .wtfto-tvn-section-head,
html[data-theme="dark"] .wtfto-tvn-section-head > div,
html[data-theme="dark"] .wtfto-tvn-scroll,
html[data-theme="dark"] .wtfto-tvn-card,
html[data-theme="dark"] .wtfto-tvn-card-link,
html[data-theme="dark"] .wtfto-tvn-image,
html[data-theme="dark"] .wtfto-tvn-card-body,
html[data-theme="dark"] .wtfto-tvn-empty,
html[data-theme="dark"] .wtfto-tvn-view-all,
html[data-theme="dark"] .wtfto-tvn-region,
html[data-theme="dark"] .wtfto-tvn-badge,
html[data-theme="dark"] .wtfto-tvn-card h3,
html[data-theme="dark"] .wtfto-tvn-card p{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .wtfto-tvn-article-label,
html[data-theme="dark"] .wtfto-tvn-kicker,
html[data-theme="dark"] .wtfto-tvn-region{
  background:transparent!important;
}
html[data-theme="dark"] .wtfto-tvn-article-label{
  display:inline-block!important;
  padding:0!important;
  color:#f4f1ec!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
html[data-theme="dark"] .wtfto-tvn-title{
  margin:0 0 16px!important;
  padding:0!important;
  background:transparent!important;
}
html[data-theme="dark"] .wtfto-tvn-deck{
  margin:0 0 24px!important;
  padding:0!important;
  background:transparent!important;
}
html[data-theme="dark"] .wtfto-tvn-kicker{
  padding:0!important;
}
html[data-theme="dark"] .wtfto-tvn-view-all{
  background:#d71920!important;
  color:#fff!important;
  padding:10px 14px!important;
}


/* v0.5.6: THEN vs NOW comments block - uses the same WordPress comment engine as regular stories */
.wtfto-tvn-comments{
  clear:both;
  margin:2.4rem 0 1.5rem;
  padding:1.25rem 1.1rem;
  border-left:0!important;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  color:inherit;
}
.wtfto-tvn-comments h2,
.wtfto-tvn-comments h3,
.wtfto-tvn-comments .comment-reply-title{
  margin:.15rem 0 .7rem!important;
  color:inherit!important;
  font-size:clamp(1.35rem,2.6vw,2.05rem)!important;
  line-height:1.05!important;
  letter-spacing:-.03em!important;
  text-transform:uppercase!important;
}
.wtfto-tvn-comment-note,
.wtfto-tvn-comments .comment-notes,
.wtfto-tvn-comments .logged-in-as{
  margin:.25rem 0 1rem!important;
  color:#aeb6bf!important;
  font-size:.96rem!important;
  line-height:1.45!important;
}
.wtfto-tvn-comments .comment-list,
.wtfto-tvn-comments ol.comment-list{
  list-style:none!important;
  margin:1rem 0 1.4rem!important;
  padding:0!important;
}
.wtfto-tvn-comments .comment,
.wtfto-tvn-comments li.comment{
  margin:0 0 1rem!important;
  padding:1rem!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:14px!important;
  background:rgba(0,0,0,.18)!important;
}
.wtfto-tvn-comments label{
  display:block!important;
  margin:.8rem 0 .35rem!important;
  font-weight:800!important;
  text-transform:uppercase!important;
  letter-spacing:.04em!important;
  font-size:.78rem!important;
  color:#d71920!important;
}
.wtfto-tvn-comments input[type="text"],
.wtfto-tvn-comments input[type="email"],
.wtfto-tvn-comments input[type="url"],
.wtfto-tvn-comments textarea{
  width:100%!important;
  box-sizing:border-box!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:12px!important;
  background:rgba(0,0,0,.25)!important;
  color:inherit!important;
  padding:.85rem .9rem!important;
  font:inherit!important;
}
.wtfto-tvn-comments textarea{min-height:145px!important;}
.wtfto-tvn-comments input[type="submit"],
.wtfto-tvn-comments button[type="submit"],
.wtfto-tvn-comments .submit input{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:0!important;
  border-radius:999px!important;
  background:#d71920!important;
  color:#fff!important;
  padding:.82rem 1.15rem!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  letter-spacing:.03em!important;
  cursor:pointer!important;
  box-shadow:0 10px 22px rgba(0,0,0,.24)!important;
}
.wtfto-tvn-comments input[type="submit"]:hover,
.wtfto-tvn-comments button[type="submit"]:hover{background:#f0262d!important;}
html[data-theme="dark"] .wtfto-tvn-comments{
  background:rgba(255,255,255,.055)!important;
  border-left:0!important;
  border-left-color:transparent!important;
  box-shadow:none!important;
}
html[data-theme="light"] .wtfto-tvn-comments,
body:not(.dark-mode) .wtfto-tvn-comments{
  background:rgba(0,0,0,.045);
}
@media (max-width:700px){
  .wtfto-tvn-comments{padding:1rem .9rem;margin-top:2rem;}
  .wtfto-tvn-comments input[type="submit"],
  .wtfto-tvn-comments button[type="submit"]{width:100%!important;}
}


/* v0.5.7: compact red Back to Then vs Now button fix */
body.single-then_now .wtfto-tvn-back-nav,
html[data-theme="dark"] body.single-then_now .wtfto-tvn-back-nav,
html[data-theme="light"] body.single-then_now .wtfto-tvn-back-nav,
body.wtfto-then-vs-now-page .wtfto-tvn-back-nav{
  clear:both!important;
  display:flex!important;
  justify-content:flex-start!important;
  align-items:center!important;
  margin:1.15rem 0 .75rem!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  min-height:0!important;
  width:auto!important;
}
body.single-then_now .wtfto-tvn-back-nav > a.wtfto-tvn-back-button,
html[data-theme="dark"] body.single-then_now .wtfto-tvn-back-nav > a.wtfto-tvn-back-button,
html[data-theme="light"] body.single-then_now .wtfto-tvn-back-nav > a.wtfto-tvn-back-button,
body.wtfto-then-vs-now-page .wtfto-tvn-back-nav > a.wtfto-tvn-back-button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.35rem!important;
  width:auto!important;
  min-width:0!important;
  max-width:max-content!important;
  min-height:0!important;
  padding:.48rem .72rem!important;
  border-radius:5px!important;
  background:#d71920!important;
  background-color:#d71920!important;
  color:#fff!important;
  border:1px solid #ff2a2a!important;
  box-shadow:none!important;
  font-size:.76rem!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.025em!important;
  text-transform:uppercase!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  transform:none!important;
}
body.single-then_now .wtfto-tvn-back-nav > a.wtfto-tvn-back-button:hover,
body.single-then_now .wtfto-tvn-back-nav > a.wtfto-tvn-back-button:focus,
body.wtfto-then-vs-now-page .wtfto-tvn-back-nav > a.wtfto-tvn-back-button:hover,
body.wtfto-then-vs-now-page .wtfto-tvn-back-nav > a.wtfto-tvn-back-button:focus{
  background:#ff1f2a!important;
  background-color:#ff1f2a!important;
  color:#fff!important;
  border-color:#ff4248!important;
  text-decoration:none!important;
}
@media (max-width:700px){
  body.single-then_now .wtfto-tvn-back-nav > a.wtfto-tvn-back-button,
  body.wtfto-then-vs-now-page .wtfto-tvn-back-nav > a.wtfto-tvn-back-button{
    width:auto!important;
    max-width:max-content!important;
    padding:.52rem .74rem!important;
    font-size:.74rem!important;
  }
}


/* v0.5.8: final hardfix for the Back to Then vs Now pill.
   The red background now lives on an inner span, so theme/link reset scripts cannot flatten it. */
body.single-then_now .wtfto-tvn-back-nav > a.wtfto-tvn-back-button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  max-width:max-content!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  background-color:transparent!important;
  color:#fff!important;
  text-decoration:none!important;
  box-shadow:none!important;
}
body.single-then_now .wtfto-tvn-back-nav > a.wtfto-tvn-back-button > .wtfto-tvn-back-pill{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  max-width:max-content!important;
  min-height:0!important;
  padding:.5rem .76rem!important;
  border-radius:5px!important;
  background:#d71920!important;
  background-color:#d71920!important;
  color:#fff!important;
  border:1px solid #ff2a2a!important;
  box-shadow:none!important;
  font-size:.76rem!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.025em!important;
  text-transform:uppercase!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}
body.single-then_now .wtfto-tvn-back-nav > a.wtfto-tvn-back-button:hover > .wtfto-tvn-back-pill,
body.single-then_now .wtfto-tvn-back-nav > a.wtfto-tvn-back-button:focus > .wtfto-tvn-back-pill{
  background:#ff1f2a!important;
  background-color:#ff1f2a!important;
  color:#fff!important;
  border-color:#ff4248!important;
}


/* v0.5.9: remove the live-site red side line on the comments box and keep the back button locked. */
body.single-then_now .wtfto-tvn-comments,
html[data-theme="dark"] body.single-then_now .wtfto-tvn-comments,
html[data-theme="light"] body.single-then_now .wtfto-tvn-comments,
body.wtfto-then-vs-now-page .wtfto-tvn-comments{
  border-left:0!important;
  border-left-color:transparent!important;
  border-right:0!important;
  border-top:0!important;
  border-bottom:0!important;
  border-radius:14px!important;
  margin-left:0!important;
  padding-left:1.25rem!important;
  box-shadow:none!important;
}
body.single-then_now .wtfto-tvn-back-nav,
body.wtfto-then-vs-now-page .wtfto-tvn-back-nav{
  border-top:0!important;
  border-bottom:0!important;
  border-left:0!important;
  border-right:0!important;
}


/* v0.6.1: keep the Back to Then vs Now button red exactly where it sits, CSS-only, light/dark safe. */
body.single-then_now .wtfto-tvn-back-nav,
html[data-theme="dark"] body.single-then_now .wtfto-tvn-back-nav,
html[data-theme="light"] body.single-then_now .wtfto-tvn-back-nav,
body.wtfto-then-vs-now-page .wtfto-tvn-back-nav{
  clear:both!important;
  display:flex!important;
  justify-content:flex-start!important;
  align-items:center!important;
  margin:1.1rem 0 .8rem!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
body.single-then_now .wtfto-tvn-back-nav > a.wtfto-tvn-back-button,
html[data-theme="dark"] body.single-then_now .wtfto-tvn-back-nav > a.wtfto-tvn-back-button,
html[data-theme="light"] body.single-then_now .wtfto-tvn-back-nav > a.wtfto-tvn-back-button,
body.wtfto-then-vs-now-page .wtfto-tvn-back-nav > a.wtfto-tvn-back-button,
body.single-then_now .wtfto-tvn-back-nav > a.wtfto-tvn-back-button > .wtfto-tvn-back-pill{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  max-width:max-content!important;
  min-width:0!important;
  min-height:0!important;
  padding:.5rem .76rem!important;
  margin:0!important;
  border-radius:5px!important;
  border:1px solid #ff2a2a!important;
  background:#d71920!important;
  background-color:#d71920!important;
  color:#fff!important;
  font-size:.76rem!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.025em!important;
  text-transform:uppercase!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  box-shadow:none!important;
  outline-color:#ff4248!important;
  user-select:none!important;
  -webkit-user-select:none!important;
}
body.single-then_now .wtfto-tvn-back-nav > a.wtfto-tvn-back-button:hover,
body.single-then_now .wtfto-tvn-back-nav > a.wtfto-tvn-back-button:focus,
body.single-then_now .wtfto-tvn-back-nav > a.wtfto-tvn-back-button:active,
body.wtfto-then-vs-now-page .wtfto-tvn-back-nav > a.wtfto-tvn-back-button:hover,
body.wtfto-then-vs-now-page .wtfto-tvn-back-nav > a.wtfto-tvn-back-button:focus,
body.wtfto-then-vs-now-page .wtfto-tvn-back-nav > a.wtfto-tvn-back-button:active{
  background:#ff1f2a!important;
  background-color:#ff1f2a!important;
  color:#fff!important;
  border-color:#ff4248!important;
  text-decoration:none!important;
}
body.single-then_now .wtfto-tvn-back-nav > a.wtfto-tvn-back-button::selection,
body.single-then_now .wtfto-tvn-back-nav > a.wtfto-tvn-back-button *::selection{
  background:#d71920!important;
  color:#fff!important;
}


/* v0.6.2: protected return link. Uses a new id/class and red inner span so later theme/link resets cannot turn the button blue/plain after refresh. */
body.single-then_now .wtfto-tvn-back-nav-v062,
body.wtfto-then-vs-now-page .wtfto-tvn-back-nav-v062,
html[data-theme="dark"] body.single-then_now .wtfto-tvn-back-nav-v062,
html[data-theme="light"] body.single-then_now .wtfto-tvn-back-nav-v062{
  clear:both!important;
  display:flex!important;
  justify-content:flex-start!important;
  align-items:center!important;
  margin:1.1rem 0 .8rem!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
body.single-then_now a#wtfto-red-return-v062,
body.wtfto-then-vs-now-page a#wtfto-red-return-v062,
html[data-theme="dark"] body.single-then_now a#wtfto-red-return-v062,
html[data-theme="light"] body.single-then_now a#wtfto-red-return-v062,
a#wtfto-red-return-v062:link,
a#wtfto-red-return-v062:visited{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  max-width:max-content!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  color:#fff!important;
  text-decoration:none!important;
  box-shadow:none!important;
  outline:0!important;
  appearance:none!important;
  -moz-appearance:none!important;
  user-select:none!important;
  -moz-user-select:none!important;
  -webkit-user-select:none!important;
  -webkit-tap-highlight-color:transparent!important;
}
body.single-then_now a#wtfto-red-return-v062 > .wtfto-red-return-label-v062,
body.wtfto-then-vs-now-page a#wtfto-red-return-v062 > .wtfto-red-return-label-v062,
html[data-theme="dark"] body.single-then_now a#wtfto-red-return-v062 > .wtfto-red-return-label-v062,
html[data-theme="light"] body.single-then_now a#wtfto-red-return-v062 > .wtfto-red-return-label-v062{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  max-width:max-content!important;
  min-width:0!important;
  min-height:0!important;
  padding:.5rem .76rem!important;
  margin:0!important;
  border-radius:5px!important;
  border:1px solid #ff2a2a!important;
  background:#d71920!important;
  background-color:#d71920!important;
  background-image:none!important;
  color:#fff!important;
  font-size:.76rem!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.025em!important;
  text-transform:uppercase!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  box-shadow:none!important;
  outline-color:#ff4248!important;
  user-select:none!important;
  -moz-user-select:none!important;
  -webkit-user-select:none!important;
  pointer-events:none!important;
}
body.single-then_now a#wtfto-red-return-v062:hover > .wtfto-red-return-label-v062,
body.single-then_now a#wtfto-red-return-v062:focus > .wtfto-red-return-label-v062,
body.single-then_now a#wtfto-red-return-v062:focus-visible > .wtfto-red-return-label-v062,
body.single-then_now a#wtfto-red-return-v062:active > .wtfto-red-return-label-v062{
  background:#ff1f2a!important;
  background-color:#ff1f2a!important;
  border-color:#ff4248!important;
  color:#fff!important;
}
body.single-then_now a#wtfto-red-return-v062::selection,
body.single-then_now a#wtfto-red-return-v062 *::selection{
  background:#d71920!important;
  color:#fff!important;
}

/* v0.6.6: match regular stories — hide raw fields, then reveal snapshot + sources inside the toggle */
.wtfto-tvn-story-facts{
  display:none!important;
}
.wtfto-tvn-references,
.wtfto-tvn-references-button{
  clear:both!important;
  display:block!important;
  margin:1.25rem 0 1.35rem!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:inherit!important;
}
.wtfto-tvn-references summary,
.wtfto-tvn-references-button summary{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  max-width:max-content!important;
  min-height:0!important;
  padding:.22rem .52rem!important;
  margin:0!important;
  border:1px solid rgba(255,255,255,.55)!important;
  border-radius:4px!important;
  background:#f2f2f2!important;
  color:#111!important;
  box-shadow:none!important;
  cursor:pointer!important;
  list-style:none!important;
  font-family:inherit!important;
  font-size:.88rem!important;
  line-height:1.2!important;
  font-weight:500!important;
  letter-spacing:0!important;
  text-transform:none!important;
  user-select:none!important;
}
.wtfto-tvn-references summary::-webkit-details-marker,
.wtfto-tvn-references-button summary::-webkit-details-marker{display:none!important;}
.wtfto-tvn-references summary:after,
.wtfto-tvn-references-button summary:after{content:none!important;}
.wtfto-tvn-references summary:hover,
.wtfto-tvn-references summary:focus,
.wtfto-tvn-references-button summary:hover,
.wtfto-tvn-references-button summary:focus{
  background:#ffffff!important;
  color:#111!important;
  outline:1px solid rgba(215,25,32,.55)!important;
  outline-offset:2px!important;
}
.wtfto-tvn-references-body{
  margin:.9rem 0 0!important;
  padding:1rem!important;
  border-left:3px solid #d71920!important;
  border-radius:10px!important;
  background:rgba(215,25,32,.06)!important;
  color:inherit!important;
}
.wtfto-tvn-references-body p{
  margin:0!important;
  font-size:.92rem!important;
  line-height:1.55!important;
}
.wtfto-tvn-references-body a{
  color:#d71920!important;
  font-weight:800!important;
  text-decoration:underline!important;
  text-underline-offset:2px!important;
}
html[data-theme="dark"] .wtfto-tvn-references,
.dark-mode .wtfto-tvn-references,
body.dark .wtfto-tvn-references,
html[data-theme="dark"] .wtfto-tvn-references-button,
.dark-mode .wtfto-tvn-references-button,
body.dark .wtfto-tvn-references-button{
  background:transparent!important;
  border:0!important;
  color:#d8d2cb!important;
}
html[data-theme="dark"] .wtfto-tvn-references-body,
.dark-mode .wtfto-tvn-references-body,
body.dark .wtfto-tvn-references-body{
  background:rgba(215,25,32,.08)!important;
  border-left-color:#ff4c4c!important;
  color:#d8d2cb!important;
}
html[data-theme="dark"] .wtfto-tvn-references-body a,
.dark-mode .wtfto-tvn-references-body a,
body.dark .wtfto-tvn-references-body a{
  color:#ff6666!important;
}
@media (max-width:700px){
  .wtfto-tvn-references summary,
  .wtfto-tvn-references-button summary{font-size:.86rem!important;}
  .wtfto-tvn-references-body{padding:.9rem!important;}
}


/* v0.6.6: submitted THEN vs NOW fields live inside the same collapsible button as sources */
.wtfto-tvn-combined-reference-toggle .wtfto-tvn-references-body{
  max-width:100%!important;
}
.wtfto-tvn-snapshot,
.wtfto-tvn-source-note{
  margin:0!important;
  padding:0!important;
}
.wtfto-tvn-source-note{
  margin-top:1rem!important;
  padding-top:1rem!important;
  border-top:1px solid rgba(255,255,255,.14)!important;
}
.wtfto-tvn-snapshot h3,
.wtfto-tvn-source-note h3{
  margin:0 0 .7rem!important;
  color:inherit!important;
  font-size:1rem!important;
  line-height:1.25!important;
  font-weight:900!important;
  letter-spacing:.01em!important;
  text-transform:none!important;
}
.wtfto-tvn-snapshot-row{
  display:grid!important;
  grid-template-columns:minmax(7rem, 10rem) 1fr!important;
  gap:.75rem!important;
  padding:.55rem 0!important;
  border-top:1px solid rgba(255,255,255,.10)!important;
}
.wtfto-tvn-snapshot-row:first-of-type{
  border-top:0!important;
}
.wtfto-tvn-snapshot-label{
  color:#ff4048!important;
  font-weight:900!important;
  line-height:1.45!important;
}
.wtfto-tvn-snapshot-value{
  color:inherit!important;
  line-height:1.55!important;
}
.wtfto-tvn-snapshot-value p,
.wtfto-tvn-source-note p{
  margin:0!important;
}
@media (max-width:700px){
  .wtfto-tvn-snapshot-row{
    display:block!important;
  }
  .wtfto-tvn-snapshot-label{
    margin-bottom:.18rem!important;
  }
}

/* v0.6.7: bottom close button inside the Sources & References drawer */
.wtfto-tvn-reference-close{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  margin:1rem 0 0!important;
  padding:.35rem .7rem!important;
  border:1px solid rgba(255,255,255,.55)!important;
  border-radius:4px!important;
  background:#f2f2f2!important;
  color:#111!important;
  box-shadow:none!important;
  cursor:pointer!important;
  font-family:inherit!important;
  font-size:.88rem!important;
  line-height:1.2!important;
  font-weight:500!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
.wtfto-tvn-reference-close:hover,
.wtfto-tvn-reference-close:focus{
  background:#ffffff!important;
  color:#111!important;
  outline:1px solid rgba(215,25,32,.55)!important;
  outline-offset:2px!important;
}
html[data-theme="dark"] .wtfto-tvn-reference-close,
.dark-mode .wtfto-tvn-reference-close,
body.dark .wtfto-tvn-reference-close{
  background:#f2f2f2!important;
  color:#111!important;
  border-color:rgba(255,255,255,.55)!important;
}
@media (max-width:640px){
  .wtfto-tvn-reference-close{
    width:100%!important;
    max-width:100%!important;
  }
}


/* v0.6.9 — unify Then vs Now references with regular story references.
   Removes the red side line, red-tinted drawer background, and heavy card treatment. */
.wtfto-tvn-references,
.wtfto-tvn-references-button,
.wtfto-tvn-combined-reference-toggle{
  display:block!important;
  margin:2rem 0 0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:inherit!important;
}
.wtfto-tvn-references summary,
.wtfto-tvn-references-button summary,
.wtfto-tvn-combined-reference-toggle summary{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  max-width:max-content!important;
  min-height:0!important;
  padding:.35rem .7rem!important;
  margin:0!important;
  border:1px solid rgba(255,255,255,.55)!important;
  border-radius:4px!important;
  background:#f2f2f2!important;
  color:#111!important;
  box-shadow:none!important;
  cursor:pointer!important;
  list-style:none!important;
  font-family:inherit!important;
  font-size:.88rem!important;
  line-height:1.2!important;
  font-weight:500!important;
  letter-spacing:0!important;
  text-transform:none!important;
  user-select:none!important;
}
.wtfto-tvn-references-body,
html[data-theme="dark"] .wtfto-tvn-references-body,
.dark-mode .wtfto-tvn-references-body,
body.dark .wtfto-tvn-references-body{
  margin:.9rem 0 0!important;
  padding:1rem 0 0!important;
  border-top:1px solid rgba(255,255,255,.14)!important;
  border-left:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:inherit!important;
}
.wtfto-tvn-source-note{
  border-top:1px solid rgba(255,255,255,.14)!important;
}
.wtfto-tvn-reference-close{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  margin:1rem 0 0!important;
  padding:.35rem .7rem!important;
  border:1px solid rgba(255,255,255,.55)!important;
  border-radius:4px!important;
  background:#f2f2f2!important;
  color:#111!important;
  box-shadow:none!important;
  cursor:pointer!important;
  font-family:inherit!important;
  font-size:.88rem!important;
  line-height:1.2!important;
  font-weight:500!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
.wtfto-tvn-reference-close:hover,
.wtfto-tvn-reference-close:focus{
  background:#ffffff!important;
  color:#111!important;
  outline:1px solid rgba(215,25,32,.55)!important;
  outline-offset:2px!important;
}


/* v0.6.11 — make Then vs Now comment form match regular story comments.
   Removes the extra/double pillbox treatment and stops Then vs Now from overriding
   comment labels, textareas, and human-check styling. */
body.single-then_now .wtfto-tvn-comments,
body.wtfto-then-vs-now-page .wtfto-tvn-comments{
  clear:both!important;
  margin:2.4rem 0 1.5rem!important;
  padding:0!important;
  border:0!important;
  border-left:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:inherit!important;
}

/* Let the normal theme comment card be the only card. */
body.single-then_now .wtfto-tvn-comments #respond,
body.single-then_now .wtfto-tvn-comments .comment-respond,
body.single-then_now .wtfto-tvn-comments .comments-area,
body.single-then_now .wtfto-tvn-comments .comment-form,
body.wtfto-then-vs-now-page .wtfto-tvn-comments #respond,
body.wtfto-then-vs-now-page .wtfto-tvn-comments .comment-respond,
body.wtfto-then-vs-now-page .wtfto-tvn-comments .comments-area,
body.wtfto-then-vs-now-page .wtfto-tvn-comments .comment-form{
  max-width:100%!important;
}

/* Stop Then vs Now from turning the regular comment headings/labels red and all-caps. */
body.single-then_now .wtfto-tvn-comments h2,
body.single-then_now .wtfto-tvn-comments h3,
body.single-then_now .wtfto-tvn-comments .comment-reply-title,
body.wtfto-then-vs-now-page .wtfto-tvn-comments h2,
body.wtfto-then-vs-now-page .wtfto-tvn-comments h3,
body.wtfto-then-vs-now-page .wtfto-tvn-comments .comment-reply-title{
  text-transform:none!important;
  letter-spacing:normal!important;
}

body.single-then_now .wtfto-tvn-comments label,
body.wtfto-then-vs-now-page .wtfto-tvn-comments label{
  color:inherit!important;
  text-transform:none!important;
  letter-spacing:normal!important;
  font-size:inherit!important;
  font-weight:700!important;
}

/* Match regular stories: light comment fields inside the dark comment card. */
body.single-then_now .wtfto-tvn-comments input[type="text"],
body.single-then_now .wtfto-tvn-comments input[type="email"],
body.single-then_now .wtfto-tvn-comments input[type="url"],
body.single-then_now .wtfto-tvn-comments textarea,
body.wtfto-then-vs-now-page .wtfto-tvn-comments input[type="text"],
body.wtfto-then-vs-now-page .wtfto-tvn-comments input[type="email"],
body.wtfto-then-vs-now-page .wtfto-tvn-comments input[type="url"],
body.wtfto-then-vs-now-page .wtfto-tvn-comments textarea{
  background:#fff!important;
  color:#111!important;
  border:1px solid rgba(0,0,0,.35)!important;
  border-radius:2px!important;
  box-shadow:none!important;
}

/* Keep the Turnstile / human-check area from inheriting the old red label treatment. */
body.single-then_now .wtfto-tvn-comments .cf-turnstile,
body.single-then_now .wtfto-tvn-comments .turnstile,
body.wtfto-then-vs-now-page .wtfto-tvn-comments .cf-turnstile,
body.wtfto-then-vs-now-page .wtfto-tvn-comments .turnstile{
  margin-top:.45rem!important;
}


/* v0.6.12 — Then vs Now comment form sizing matched to regular stories.
   This only affects the comment area on single Then vs Now stories. */
body.single-then_now .wtfto-tvn-comments,
body.wtfto-then-vs-now-page .wtfto-tvn-comments{
  width:100%!important;
  max-width:none!important;
  margin:2.4rem 0 1.5rem!important;
  padding:0!important;
}

/* Make the actual comment card line up and size like regular story comments. */
body.single-then_now #comments,
body.single-then_now .comments-area,
body.single-then_now .comment-respond,
body.single-then_now #respond,
body.wtfto-then-vs-now-page #comments,
body.wtfto-then-vs-now-page .comments-area,
body.wtfto-then-vs-now-page .comment-respond,
body.wtfto-then-vs-now-page #respond{
  width:100%!important;
  max-width:none!important;
}

/* Match regular story "Leave a comment" scale instead of the oversized Then vs Now heading. */
body.single-then_now #reply-title,
body.single-then_now .comment-reply-title,
body.single-then_now #comments h2,
body.single-then_now #comments h3,
body.wtfto-then-vs-now-page #reply-title,
body.wtfto-then-vs-now-page .comment-reply-title,
body.wtfto-then-vs-now-page #comments h2,
body.wtfto-then-vs-now-page #comments h3{
  font-size:1.45rem!important;
  line-height:1.2!important;
  font-weight:800!important;
  text-transform:none!important;
  letter-spacing:normal!important;
  margin:0 0 1.2rem!important;
}

/* Match regular story labels. */
body.single-then_now .comment-form label,
body.wtfto-then-vs-now-page .comment-form label{
  display:block!important;
  font-size:1rem!important;
  line-height:1.25!important;
  font-weight:800!important;
  text-transform:none!important;
  letter-spacing:normal!important;
  margin:0 0 .55rem!important;
  color:inherit!important;
}

/* Match the regular story comment textarea size instead of the full-width oversized box. */
body.single-then_now .comment-form-comment textarea,
body.single-then_now textarea#comment,
body.wtfto-then-vs-now-page .comment-form-comment textarea,
body.wtfto-then-vs-now-page textarea#comment{
  display:block!important;
  width:625px!important;
  max-width:100%!important;
  min-height:108px!important;
  height:108px!important;
  padding:.45rem!important;
  font-size:1rem!important;
  line-height:1.35!important;
  border-radius:2px!important;
  resize:vertical!important;
}

/* Keep the human-check and submit button aligned to the same left column. */
body.single-then_now .comment-form .cf-turnstile,
body.single-then_now .comment-form .turnstile,
body.single-then_now .comment-form .comment-form-cookies-consent,
body.single-then_now .comment-form .form-submit,
body.wtfto-then-vs-now-page .comment-form .cf-turnstile,
body.wtfto-then-vs-now-page .comment-form .turnstile,
body.wtfto-then-vs-now-page .comment-form .comment-form-cookies-consent,
body.wtfto-then-vs-now-page .comment-form .form-submit{
  max-width:625px!important;
}


/* v0.6.13 — stronger mirror of regular story comment form.
   These selectors do not depend on body classes, so they win on every Then vs Now single template. */
@media (min-width: 900px){
  .wtfto-tvn-comments{
    width:calc(100vw - 108px)!important;
    max-width:none!important;
    margin-left:calc(50% - 50vw + 54px)!important;
    margin-right:54px!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
}

/* The outer comment card should behave like regular stories, not the older narrow Then vs Now column. */
.wtfto-tvn-comments #comments,
.wtfto-tvn-comments .comments-area,
.wtfto-tvn-comments #respond,
.wtfto-tvn-comments .comment-respond{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* Heading size: mirror regular story scale. */
.wtfto-tvn-comments #reply-title,
.wtfto-tvn-comments .comment-reply-title,
.wtfto-tvn-comments h2,
.wtfto-tvn-comments h3{
  font-size:1.45rem!important;
  line-height:1.2!important;
  font-weight:800!important;
  text-transform:none!important;
  letter-spacing:normal!important;
  margin:0 0 1.2rem!important;
}

/* Logged-in line and labels: mirror regular stories. */
.wtfto-tvn-comments .logged-in-as,
.wtfto-tvn-comments .comment-notes{
  font-size:1rem!important;
  line-height:1.45!important;
  margin:.2rem 0 1.1rem!important;
}

.wtfto-tvn-comments .comment-form label,
.wtfto-tvn-comments label{
  display:block!important;
  font-size:1rem!important;
  line-height:1.25!important;
  font-weight:800!important;
  color:inherit!important;
  text-transform:none!important;
  letter-spacing:normal!important;
  margin:0 0 .55rem!important;
}

/* Textarea: force the same regular-story size. */
.wtfto-tvn-comments .comment-form-comment textarea,
.wtfto-tvn-comments textarea#comment,
.wtfto-tvn-comments textarea{
  display:block!important;
  width:625px!important;
  max-width:100%!important;
  min-width:0!important;
  height:108px!important;
  min-height:108px!important;
  padding:.45rem!important;
  font-size:1rem!important;
  line-height:1.35!important;
  border-radius:2px!important;
  background:#fff!important;
  color:#111!important;
  border:1px solid rgba(0,0,0,.35)!important;
  box-shadow:none!important;
  resize:vertical!important;
}

/* Keep human check and submit aligned with the regular story field column. */
.wtfto-tvn-comments .cf-turnstile,
.wtfto-tvn-comments .turnstile,
.wtfto-tvn-comments .comment-form-cookies-consent,
.wtfto-tvn-comments .form-submit{
  max-width:625px!important;
}

/* Mobile: avoid full-bleed forcing on phones. */
@media (max-width: 899px){
  .wtfto-tvn-comments{
    width:auto!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
  }
  .wtfto-tvn-comments .comment-form-comment textarea,
  .wtfto-tvn-comments textarea#comment,
  .wtfto-tvn-comments textarea{
    width:100%!important;
  }
}


/* v0.6.14 backup — Then vs Now comment card width match regular stories.
   The footer inline CSS in class-wtfto-then-vs-now.php is the final winner. */
@media (min-width: 900px){
  body.single-then_now main.container .wtfto-tvn-article .wtfto-tvn-comments,
  body.wtfto-then-vs-now-page main.container .wtfto-tvn-article .wtfto-tvn-comments{
    width:min(1248px, calc(100vw - 64px))!important;
    max-width:none!important;
    margin-left:calc((min(1248px, calc(100vw - 64px)) - 100%) / -2)!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  body.single-then_now main.container .wtfto-tvn-comments > .card,
  body.single-then_now main.container .wtfto-tvn-comments .wtfto-comments-flow,
  body.wtfto-then-vs-now-page main.container .wtfto-tvn-comments > .card,
  body.wtfto-then-vs-now-page main.container .wtfto-tvn-comments .wtfto-comments-flow{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }
}

/* v0.6.20 — mobile single-story cleanup.
   Hide the top deck/excerpt under the title on phones only so it does not
   repeat immediately when the body starts below the hero image. Desktop stays unchanged. */
@media (max-width: 700px){
  body.single-then_now .wtfto-tvn-article > article > .wtfto-tvn-deck,
  body.wtfto-then-vs-now-page.single-then_now .wtfto-tvn-article > article > .wtfto-tvn-deck{
    display:none!important;
  }
}


/* v0.6.22 — featured-image caption visibility fix.
   The WTFTO story pages use a dark background, but some pages do not expose the
   expected dark-mode body class. Force the main Then vs Now hero caption to stay readable. */
body.single-then_now .wtfto-tvn-hero-caption,
body.wtfto-then-vs-now-page .wtfto-tvn-hero-caption,
.single-then_now .wtfto-tvn-article .wtfto-tvn-hero-caption,
.wtfto-tvn-article .wtfto-tvn-hero-caption{
  color:rgba(255,255,255,.66)!important;
  opacity:.92!important;
}
body.single-then_now .wtfto-tvn-hero-caption a,
body.wtfto-then-vs-now-page .wtfto-tvn-hero-caption a,
.single-then_now .wtfto-tvn-article .wtfto-tvn-hero-caption a,
.wtfto-tvn-article .wtfto-tvn-hero-caption a{
  color:#fff!important;
  text-decoration:underline!important;
}
@media (max-width:700px){
  body.single-then_now .wtfto-tvn-hero-caption,
  body.wtfto-then-vs-now-page .wtfto-tvn-hero-caption,
  .single-then_now .wtfto-tvn-article .wtfto-tvn-hero-caption,
  .wtfto-tvn-article .wtfto-tvn-hero-caption{
    font-size:.72rem!important;
    line-height:1.32!important;
    margin-top:7px!important;
  }
}

/* v0.6.23 — MSN-style red bracket captions for THEN vs NOW.
   Applies to the main featured image caption and body image captions inside Then vs Now stories. */
body.single-then_now .wtfto-tvn-hero-caption,
body.wtfto-then-vs-now-page .wtfto-tvn-hero-caption,
.single-then_now .wtfto-tvn-article .wtfto-tvn-hero-caption,
.wtfto-tvn-article .wtfto-tvn-hero-caption,
body.single-then_now .wtfto-tvn-content .wtfto-magazine-caption,
body.wtfto-then-vs-now-page .wtfto-tvn-content .wtfto-magazine-caption,
.single-then_now .wtfto-tvn-content .wtfto-magazine-caption{
  position:relative!important;
  display:block!important;
  margin:10px 0 30px 0!important;
  padding:0 0 0 28px!important;
  border:0!important;
  border-left:0!important;
  background:transparent!important;
  color:rgba(255,255,255,.76)!important;
  opacity:1!important;
  font-size:.82rem!important;
  line-height:1.38!important;
  font-style:normal!important;
  font-weight:500!important;
  letter-spacing:.01em!important;
  box-shadow:none!important;
}
body.single-then_now .wtfto-tvn-hero-caption::before,
body.wtfto-then-vs-now-page .wtfto-tvn-hero-caption::before,
.single-then_now .wtfto-tvn-article .wtfto-tvn-hero-caption::before,
.wtfto-tvn-article .wtfto-tvn-hero-caption::before,
body.single-then_now .wtfto-tvn-content .wtfto-magazine-caption::before,
body.wtfto-then-vs-now-page .wtfto-tvn-content .wtfto-magazine-caption::before,
.single-then_now .wtfto-tvn-content .wtfto-magazine-caption::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:3px!important;
  width:2px!important;
  height:20px!important;
  background:#d71920!important;
  border-radius:0!important;
}
body.single-then_now .wtfto-tvn-hero-caption::after,
body.wtfto-then-vs-now-page .wtfto-tvn-hero-caption::after,
.single-then_now .wtfto-tvn-article .wtfto-tvn-hero-caption::after,
.wtfto-tvn-article .wtfto-tvn-hero-caption::after,
body.single-then_now .wtfto-tvn-content .wtfto-magazine-caption::after,
body.wtfto-then-vs-now-page .wtfto-tvn-content .wtfto-magazine-caption::after,
.single-then_now .wtfto-tvn-content .wtfto-magazine-caption::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:22px!important;
  width:14px!important;
  height:2px!important;
  background:#d71920!important;
  border-radius:0!important;
}
body.single-then_now .wtfto-tvn-hero-caption a,
body.wtfto-then-vs-now-page .wtfto-tvn-hero-caption a,
body.single-then_now .wtfto-tvn-content .wtfto-magazine-caption a,
body.wtfto-then-vs-now-page .wtfto-tvn-content .wtfto-magazine-caption a{
  color:#fff!important;
  text-decoration:underline!important;
}
body.single-then_now .wtfto-tvn-content .wtfto-magazine-caption .wtfto-image-caption-main,
body.wtfto-then-vs-now-page .wtfto-tvn-content .wtfto-magazine-caption .wtfto-image-caption-main{
  display:block!important;
  color:rgba(255,255,255,.82)!important;
  font-weight:600!important;
}
body.single-then_now .wtfto-tvn-content .wtfto-magazine-caption .wtfto-image-caption-source,
body.wtfto-then-vs-now-page .wtfto-tvn-content .wtfto-magazine-caption .wtfto-image-caption-source{
  display:block!important;
  color:rgba(255,255,255,.62)!important;
  opacity:1!important;
  margin-top:2px!important;
}
@media (max-width:700px){
  body.single-then_now .wtfto-tvn-hero-caption,
  body.wtfto-then-vs-now-page .wtfto-tvn-hero-caption,
  .single-then_now .wtfto-tvn-article .wtfto-tvn-hero-caption,
  .wtfto-tvn-article .wtfto-tvn-hero-caption,
  body.single-then_now .wtfto-tvn-content .wtfto-magazine-caption,
  body.wtfto-then-vs-now-page .wtfto-tvn-content .wtfto-magazine-caption,
  .single-then_now .wtfto-tvn-content .wtfto-magazine-caption{
    margin:8px 0 24px 0!important;
    padding-left:24px!important;
    font-size:.74rem!important;
    line-height:1.34!important;
  }
}