/* shared typography — every element inside the widget, so nothing inherits the theme's font */
.pht{font-family:"Lexend",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:400;letter-spacing:-.05em}
.pht *{font-family:inherit;letter-spacing:inherit}
.pht input,.pht select,.pht textarea,.pht button,.pht a{font-family:inherit;letter-spacing:inherit}

.pht{font-family:"Lexend",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:400;letter-spacing:-.05em}
.pht input,.pht select,.pht textarea,.pht button{font-family:inherit;letter-spacing:inherit}

.pht{--pht-accent:#8a6a3b;--pht-card:#fff;--pht-line:#e2ddd3;--pht-ink:#1c1c1c;
  --pht-muted:#7a7469;--pht-gap:64px;--pht-colgap:40px;--pht-stagger:45%;--pht-thumb:168px;--pht-radius:10px}
.pht *,.pht *::before,.pht *::after{box-sizing:border-box}

.pht-count{font-size:.85rem;color:var(--pht-muted);text-align:right;margin-bottom:18px}

/* the line itself */
.pht-line{position:relative;padding:0 0 8px}
.pht-line::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;
  background:var(--pht-line);transform:translateX(-50%)}
.pht-single .pht-line::before{left:9px;transform:none}

/* year markers break the run up so it never feels bunched */
.pht-year-marker{position:relative;display:none;justify-content:center;
  margin:calc(var(--pht-gap) * .6) 0 calc(var(--pht-gap) * .5)}
.pht-line > .pht-item:first-child,
.pht-line > .pht-year-marker:first-child{margin-top:0!important}
.pht-year-marker.is-shown{display:flex}
/* a display declaration beats the browser's own [hidden] rule, so say it here too */
.pht-year-marker[hidden],.pht-item[hidden],.pht-sentinel[hidden]{display:none!important}
.pht-year-marker span{position:relative;z-index:2;background:var(--pht-accent);color:#fff;
  padding:5px 18px;border-radius:99px;font-size:.82rem;font-weight:700;letter-spacing:.04em}
.pht-single .pht-year-marker{justify-content:flex-start;padding-left:34px}
.pht-year-marker:first-child{margin-top:0}

/* entries */
.pht-item{position:relative;width:calc(50% - var(--pht-colgap));margin-bottom:var(--pht-gap)}
.pht-item:nth-of-type(odd){margin-right:auto}
.pht-item:nth-of-type(even){margin-left:auto}
.pht-single .pht-item{width:auto;margin-left:34px;margin-right:0}
.pht-item[hidden]{display:none}

.pht-node{position:absolute;top:26px;width:13px;height:13px;border-radius:50%;
  background:var(--pht-accent);border:3px solid #fff;box-shadow:0 0 0 2px var(--pht-line);z-index:2}
.pht-item:nth-of-type(odd) .pht-node{right:calc(var(--pht-colgap) * -1 - 6px)}
.pht-item:nth-of-type(even) .pht-node{left:calc(var(--pht-colgap) * -1 - 6px)}
.pht-single .pht-node{left:-31px;right:auto}

/* a faint leader from the node to the card */
.pht-item::after{content:"";position:absolute;top:32px;height:2px;background:var(--pht-line)}
.pht-item:nth-of-type(odd)::after{right:calc(var(--pht-colgap) * -1);width:var(--pht-colgap)}
.pht-item:nth-of-type(even)::after{left:calc(var(--pht-colgap) * -1);width:var(--pht-colgap)}
.pht-single .pht-item::after{left:-25px;width:25px}

.pht-card{display:block;background:var(--pht-card);border:1px solid var(--pht-line);
  border-radius:var(--pht-radius);overflow:hidden;text-decoration:none;color:var(--pht-ink);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s}
.pht-card:hover{transform:translateY(-3px);border-color:var(--pht-accent);
  box-shadow:0 10px 28px rgba(0,0,0,.09)}

.pht-thumb{display:block;overflow:hidden;background:#e8e4da;
  aspect-ratio:var(--pht-ratio,16/9);height:auto}
/* older browsers with no aspect-ratio support fall back to the fixed height */
@supports not (aspect-ratio:16/9){
  .pht-thumb{height:var(--pht-thumb)}
}
.pht-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.pht-card:hover .pht-thumb img{transform:scale(1.04)}
.pht-thumb-empty{display:flex;align-items:center;justify-content:center}
.pht-thumb-empty span{font-size:2rem;font-weight:700;color:rgba(0,0,0,.16);letter-spacing:.02em}

.pht-body{display:block;padding:16px 18px 18px}
.pht-year{display:block;font-size:1.28rem;font-weight:700;color:var(--pht-accent);line-height:1.1;margin-bottom:5px}
.pht-title{display:block;font-size:1.02rem;font-weight:700;line-height:1.32;margin-bottom:8px;
  color:var(--pht-title-ink,#000)}
.pht .pht-card,.pht .pht-card:hover,.pht .pht-card:focus{text-decoration:none}
.pht .pht-title{color:var(--pht-title-ink,#000)!important;text-decoration:none!important}
.pht-excerpt{display:block;font-size:.88rem;line-height:1.5;color:var(--pht-muted);margin-bottom:9px}
.pht-meta{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--pht-muted)}
.pht-dot{margin:0 6px}
.pht-theme{color:var(--pht-accent)}

.pht-more-wrap{text-align:center;margin-top:14px}
.pht-more-wrap[hidden]{display:none}
.pht .pht-more{padding:11px 30px;border:1px solid var(--pht-line);border-radius:99px;
  background:var(--pht-card)!important;color:var(--pht-ink)!important;font:inherit;font-weight:600;
  cursor:pointer;text-transform:none;box-shadow:none;appearance:none;margin:0}
.pht .pht-more:hover{border-color:var(--pht-accent);color:var(--pht-accent)!important}

/* entrance */
@media (prefers-reduced-motion:no-preference){
  .pht-item{opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease}
  .pht-item.is-in{opacity:1;transform:none}
}

@media(max-width:820px){
  .pht{--pht-colgap:0px;--pht-gap:34px}
  .pht-line::before{left:9px;transform:none}
  .pht-item,.pht-item:nth-of-type(odd),.pht-item:nth-of-type(even){width:auto;margin-left:34px;margin-right:0}
  .pht-item:nth-of-type(odd) .pht-node,.pht-item:nth-of-type(even) .pht-node{left:-31px;right:auto}
  .pht-item:nth-of-type(odd)::after,.pht-item:nth-of-type(even)::after{left:-25px;width:25px}
  .pht-year-marker{justify-content:flex-start;padding-left:34px}
}

/* ---------------------------------------------------------------- headshots
   One treatment everywhere: circular, party colour behind, no border.
   The party colour shows through where a photo is missing or transparent.
   Deliberately NOT applied to the Politicle autocomplete, where the colour
   would give the answer away. */
.pmd-photo,.pfc-avatar,.pfc-person-pic,.pfl-headshot,.politicle-mp-avatar{
  border-radius:50%;overflow:hidden;border:0!important;box-shadow:none!important;
  background:var(--party-colour,#e8e8e8);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.pmd-photo img,.pfc-avatar img,.pfc-person-pic img,.pfl-headshot img,.politicle-mp-avatar img{
  width:100%;height:100%;object-fit:cover;object-position:center top;display:block}

/* --------------------------------------- previous / next event, timeline style
   Shares the timeline's palette so a single entry feels like part of the run. */
.phn{--phn-accent:var(--pht-accent,#8a6a3b);--phn-card:var(--pht-card,#fff);
  --phn-line:var(--pht-line,#e2ddd3);--phn-ink:var(--pht-ink,#1c1c1c);
  --phn-muted:var(--pht-muted,#7a7469);--phn-radius:var(--pht-radius,10px);
  --phn-node-size:46px;--phn-thick:2px;--phn-gap:18px;--phn-thumb:74px;
  display:block;color:var(--phn-ink);position:relative}

/* the rail, with the year sitting on it like a timeline marker */
.phn-rail{position:relative;height:var(--phn-node-size);display:flex;align-items:center;
  justify-content:center;margin-bottom:var(--phn-gap)}
.phn-rail::before{content:"";position:absolute;left:0;right:0;top:50%;
  height:var(--phn-thick);background:var(--phn-line);transform:translateY(-50%)}
.phn-node{position:relative;z-index:2;background:var(--phn-accent);color:#fff;
  border-radius:99px;padding:7px 20px;font-size:.85rem;font-weight:700;letter-spacing:.03em;
  line-height:1;min-width:var(--phn-node-size);text-align:center;
  display:inline-flex;align-items:center;justify-content:center}
.phn-node:empty{width:var(--phn-node-size);height:var(--phn-node-size);padding:0;border-radius:50%;
  border:3px solid var(--phn-card);box-shadow:0 0 0 var(--phn-thick) var(--phn-line)}

/* the two cards */
.phn-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--phn-gap)}
.phn .phn-card{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--phn-ink);
  background:var(--phn-card);border:1px solid var(--phn-line);border-radius:var(--phn-radius);
  padding:12px;min-width:0;transition:transform .16s ease,box-shadow .16s ease,border-color .16s}
.phn .phn-card:hover{transform:translateY(-3px);border-color:var(--phn-accent);
  box-shadow:0 10px 28px rgba(0,0,0,.09)}
.phn .phn-card.is-off{visibility:hidden}
.phn-next{flex-direction:row-reverse;text-align:right}

.phn-thumb{flex:0 0 auto;width:var(--phn-thumb);height:var(--phn-thumb);
  border-radius:calc(var(--phn-radius) - 3px);overflow:hidden;background:#e8e4da}
.phn-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.phn .phn-card:hover .phn-thumb img{transform:scale(1.05)}

.phn-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.phn-label{display:flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--phn-accent)}
.phn-next .phn-label{flex-direction:row-reverse}
.phn-arrow{font-size:1em;line-height:1}
.phn-title{font-size:.95rem;font-weight:700;line-height:1.32;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.phn .phn-card:hover .phn-title{text-decoration:underline;text-underline-offset:2px}
.phn-when{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--phn-muted)}

/* footer */
.phn-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:var(--phn-gap);padding-top:var(--phn-gap);border-top:1px solid var(--phn-line);flex-wrap:wrap}
.phn-date{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--phn-muted)}
.phn .phn-archive{margin-left:auto;text-decoration:none;color:var(--phn-accent);
  font-size:.85rem;font-weight:600}
.phn .phn-archive:hover{text-decoration:underline}

@media(max-width:640px){
  .phn{--phn-thumb:56px;--phn-gap:12px}
  .phn-cards{grid-template-columns:minmax(0,1fr)}
  .phn-next,.phn-next .phn-label{flex-direction:row;text-align:left}
  .phn-title{-webkit-line-clamp:1}
}

/* the sentinel the observer watches for */
.pht-sentinel{height:1px;width:100%}
.pht-sentinel[hidden]{display:none}

/* masonry: the run is positioned in JS, so the CSS alternation stands down */
@media(min-width:821px){
  .pht.is-masonry .pht-line{position:relative}
  .pht.is-masonry .pht-item,
  .pht.is-masonry .pht-year-marker{margin:0!important}
  .pht.is-masonry .pht-item:nth-of-type(odd),
  .pht.is-masonry .pht-item:nth-of-type(even){margin:0!important;width:auto}
  /* node and leader follow the column the card actually landed in */
  .pht.is-masonry .pht-item.is-left .pht-node{right:calc(var(--pht-colgap) * -1 - 6px);left:auto}
  .pht.is-masonry .pht-item.is-right .pht-node{left:calc(var(--pht-colgap) * -1 - 6px);right:auto}
  .pht.is-masonry .pht-item.is-left::after{right:calc(var(--pht-colgap) * -1);left:auto;width:var(--pht-colgap)}
  .pht.is-masonry .pht-item.is-right::after{left:calc(var(--pht-colgap) * -1);right:auto;width:var(--pht-colgap)}
  .pht.is-masonry .pht-year-marker:not([hidden]){display:flex;justify-content:center}
}

/* --------------------------------------------------------------- filter bar */
.pht-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.pht .pht-pill{padding:9px 22px;border-radius:99px;border:1px solid var(--pht-accent);
  background:var(--pht-accent)!important;color:#fff!important;font:inherit;font-size:.85rem;
  font-weight:600;cursor:pointer;appearance:none;margin:0;text-transform:none;box-shadow:none;
  white-space:nowrap;transition:background .14s}
.pht .pht-pill:hover{background:var(--pht-ink)!important;border-color:var(--pht-ink)}
.pht .pht-select{flex:1 1 180px;min-width:0;max-width:300px;padding:9px 14px;border-radius:99px;
  border:1px solid var(--pht-line);background:#fff;color:var(--pht-ink);font:inherit;font-size:.85rem;
  cursor:pointer;appearance:none;margin:0;
  background-image:linear-gradient(45deg,transparent 50%,var(--pht-muted) 50%),
    linear-gradient(135deg,var(--pht-muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
/* A select holding optgroups renders its list differently from a flat one, so
   the open menus drifted apart in font and size. Pinning the option and optgroup
   elements as well as the control keeps all three filters matching. */
.pht .pht-select,
.pht .pht-select option,
.pht .pht-select optgroup{
  font-family:"Lexend",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:.85rem;
  letter-spacing:-.05em;
  color:var(--pht-ink)
}
.pht .pht-select optgroup{font-weight:700}
.pht .pht-select option{font-weight:400}
.pht .pht-select:focus{outline:none;border-color:var(--pht-accent)}

/* the sort button: what it is showing, and which way */
.pht .pht-pill{display:inline-flex;align-items:center;gap:8px}
.pht-pill-arrows{font-size:.9em;line-height:1;opacity:.85}

/* a native select can't hold a button, so the cross sits over it */
.pht-select-wrap{position:relative;display:inline-flex;flex:1 1 180px;min-width:0;max-width:300px}
.pht-select-wrap .pht-select{flex:1 1 auto;max-width:none;width:100%}
.pht-select-wrap.has-value .pht-select{border-color:var(--pht-accent);padding-right:52px}
.pht .pht-select-clear{
  position:absolute;right:30px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  background:none!important;border:0;padding:0;margin:0;
  color:var(--pht-muted)!important;font-size:1.05rem;cursor:pointer;
  appearance:none;box-shadow:none;transition:color .15s ease
}
.pht .pht-select-clear:hover{color:var(--pht-accent)!important}
.pht .pht-select-clear[hidden]{display:none}

@media(max-width:760px){
  .pht-select-wrap{flex:1 1 100%;max-width:none}
}
.pht-filters .pht-count{margin-left:auto;font-size:.85rem;color:var(--pht-muted);white-space:nowrap}
.pht-item.is-filtered-out{display:none!important}

@media(max-width:700px){
  .pht-filters{gap:8px}
  .pht .pht-select{flex:1 1 100%;max-width:none}
  .pht-filters .pht-count{margin-left:0}
}

/* the single history date */
.phd{font-family:"Lexend",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:400;letter-spacing:-.05em;margin:0}