/* ==========================================================================
   The Pensions Report — reader styling for calculatemypension.co.uk
   Mirrors the design of the weekly newsletter (cream page, Charter serif,
   teal links, coral rules) but scoped to .tpr so it cannot leak into the
   rest of the site or collide with Bootstrap / styles-tablet.css.
   ========================================================================== */

.tpr{
  --tpr-bg:#f6f4ef;
  --tpr-fg:#373738;
  --tpr-mut:#7a7873;
  --tpr-teal:#01686b;
  --tpr-coral:#fb7960;
  --tpr-line:#e3dfd6;
  --tpr-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  background:var(--tpr-bg);
  color:var(--tpr-fg);
  font:400 18px/1.72 Charter,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.tpr *{box-sizing:border-box}

.tpr .wrap{max-width:660px;margin:0 auto;padding:44px 16px 96px}

/* --- masthead ----------------------------------------------------------- */
.tpr .masthead{margin:0 0 30px}
.tpr .masthead img{display:block;width:100%;max-width:330px;height:auto;border-radius:7px}
.tpr .strap{
  margin:16px 0 0;font-family:var(--tpr-sans);
  font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tpr-mut);font-weight:600;
}

/* --- body copy ---------------------------------------------------------- */
.tpr h2{
  font-family:var(--tpr-sans);
  font-size:1.42rem;line-height:1.25;letter-spacing:-.02em;font-weight:800;
  margin:2.5em 0 .6em;color:var(--tpr-fg);
}
.tpr h2::before{
  content:"";display:block;width:38px;height:3px;
  background:var(--tpr-coral);border-radius:2px;margin-bottom:.7em;
}
.tpr h3{
  font-family:var(--tpr-sans);
  font-size:1.05rem;font-weight:750;margin:1.9em 0 .35em;color:var(--tpr-teal);
}
.tpr p{margin:0 0 1.05em}
.tpr .masthead + p,
.tpr p.lede{font-size:1.3rem;line-height:1.55;letter-spacing:-.005em}
.tpr ul{margin:0 0 1.4em;padding-left:1.2em;list-style:disc}
.tpr li{margin:.55em 0}
.tpr li::marker{color:var(--tpr-coral)}
.tpr strong{font-weight:700}
.tpr a{
  color:inherit;text-decoration:none;
  background-image:linear-gradient(var(--tpr-teal),var(--tpr-teal));
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 1.12em;
  padding-bottom:1px;transition:background-size .15s ease;
}
.tpr a:hover{color:var(--tpr-teal);background-size:100% 2px}
.tpr .note{
  margin-top:2.6em;padding-top:1.2em;border-top:1px solid var(--tpr-line);
  font-family:var(--tpr-sans);font-size:.82rem;line-height:1.6;color:var(--tpr-mut);
}

/* --- index page: issue list --------------------------------------------- */
.tpr ul.issues{margin:0;padding:0;list-style:none}
.tpr ul.issues > li.issue{
  margin:0;padding:26px 0;border-top:1px solid var(--tpr-line);
}
.tpr ul.issues > li.issue::marker{content:""}
.tpr ul.issues > li.issue:first-child{border-top:0}
.tpr .issue-date{
  margin:0;font-family:var(--tpr-sans);font-size:.72rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--tpr-mut);font-weight:600;
}
.tpr h3.issue-title{
  font-family:var(--tpr-sans);font-size:1.3rem;line-height:1.28;
  letter-spacing:-.02em;font-weight:800;margin:.45em 0 .3em;color:var(--tpr-fg);
}
.tpr h3.issue-title a{
  background-image:linear-gradient(var(--tpr-teal),var(--tpr-teal));
  background-size:0 2px;background-position:0 100%;
  padding-bottom:2px;transition:background-size .18s ease,color .18s ease;
}
.tpr h3.issue-title a:hover{background-size:100% 2px;color:var(--tpr-teal)}
.tpr .issue-summary{margin:0 0 .85em}
.tpr ul.topics{
  display:flex;flex-wrap:wrap;gap:6px;margin:0 0 .9em;padding:0;list-style:none;
}
.tpr ul.topics > li{
  font-family:var(--tpr-sans);font-size:.72rem;line-height:1;font-weight:600;
  color:var(--tpr-mut);border:1px solid var(--tpr-line);border-radius:999px;
  padding:6px 10px;margin:0;
}
.tpr ul.topics > li::marker{content:""}
.tpr .read-on{margin:0}
.tpr .read-on a{
  font-family:var(--tpr-sans);font-size:.82rem;font-weight:700;
  color:var(--tpr-teal);letter-spacing:.01em;background-size:0 1px;
}
.tpr .read-on a:hover{background-size:100% 1px}

/* --- callouts and back link --------------------------------------------- */
.tpr .panel{
  margin:2.2em 0 0;padding:22px 22px 6px;border:1px solid var(--tpr-line);
  border-radius:10px;background:rgba(255,255,255,.55);
}
.tpr .panel h3{margin-top:0}
.tpr .back{
  display:inline-block;margin:0 0 26px;font-family:var(--tpr-sans);
  font-size:.8rem;font-weight:700;letter-spacing:.04em;color:var(--tpr-mut);
  background:none;
}
.tpr .back:hover{color:var(--tpr-teal)}

@media (max-width:600px){
  .tpr{font-size:17px}
  .tpr h2{font-size:1.22rem}
  .tpr h3.issue-title{font-size:1.14rem}
  .tpr .wrap{padding-top:32px}
}