/* tp-foot */

/* mirrors the Variety Partners footer, measured value for value */
footer.tpfoot{position:relative;background:#141416;color:#c9c5bd;padding:36px 46px 32px;border-top:3px solid #c4ab67;
  display:grid;grid-template-columns:360px auto auto 1fr;column-gap:84px;row-gap:0;
  align-items:start;text-align:left;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
footer.tpfoot .tpf-id{grid-column:1}
footer.tpfoot .tpf-mark{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:#fff;
  font-family:Georgia,'Times New Roman',serif;font-size:21px;line-height:34px}
footer.tpfoot .tpf-tag{color:#876c22;font-family:Georgia,'Times New Roman',serif;font-style:italic;
  font-size:17.7px;line-height:26.55px;margin-top:19px}
footer.tpfoot .tpf-sched{font-size:13px;line-height:23.4px;letter-spacing:2.1px;text-transform:uppercase;
  color:#d6d3ca;margin-top:18px}
footer.tpfoot .tpf-col{position:relative;padding-top:18.15px}
footer.tpfoot .tpf-col.c2{grid-column:2;align-self:stretch}
footer.tpfoot .tpf-col.c3{grid-column:3}
footer.tpfoot .tpf-h{font:700 13px/15px -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:2.95px;
  text-transform:uppercase;color:#8c8981;margin:0;position:relative;top:-6px}
footer.tpfoot .tpf-icons{display:flex;align-items:center;column-gap:30px;margin-top:22.6px}
footer.tpfoot .tpf-ico{color:#e6e3db;display:inline-flex;align-items:center;justify-content:center;
  width:32.3px;height:32.3px}
footer.tpfoot .tpf-ico svg{width:28.89px;height:28.89px}
footer.tpfoot .tpf-ico.x svg{width:28.89px;height:28.89px}
footer.tpfoot .tpf-ico:hover{color:#876c22}
footer.tpfoot .tpf-icons>a+a{position:relative}
footer.tpfoot .tpf-icons>a+a::before{content:"";position:absolute;left:-15px;top:50%;
  transform:translateY(-50%);width:1px;height:26px;background:rgba(230,227,219,.22)}
footer.tpfoot .tpf-pub{display:block;margin-top:24.1px;color:#e6e3db;text-decoration:none;
  font-size:16px;line-height:30px;white-space:nowrap}
footer.tpfoot .tpf-pub::after{content:" \2197";color:#876c22}
footer.tpfoot .tpf-pub:hover{color:#876c22}
footer.tpfoot .tpf-col.c2::after{content:"";position:absolute;left:-103.5px;top:0;bottom:0;width:1px;
  background:rgba(255,255,255,.13)}
footer.tpfoot .tpf-top{position:absolute;right:46px;top:93.2px;display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;color:#c9c5bd;background:rgba(255,255,255,.07);border-radius:99px;padding:9px 17px;
  font:400 13px/13px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:2.2px}
footer.tpfoot .tpf-top:hover{background:rgba(255,255,255,.12)}
@media(max-width:760px){
 footer.tpfoot{display:block;padding:30px 22px 24px;text-align:center}
 footer.tpfoot .tpf-mark{font-size:19px}
 footer.tpfoot .tpf-id{display:flex;flex-direction:column;align-items:center}
 footer.tpfoot .tpf-col{padding-top:0;margin-top:26px;display:flex;flex-direction:column;align-items:center}
 footer.tpfoot .tpf-col.c2::after{display:none}
 footer.tpfoot .tpf-icons{justify-content:center;margin-top:14px}
 footer.tpfoot .tpf-pub{margin-top:12px;white-space:normal}
 footer.tpfoot .tpf-top{display:none}
}
html{background:#141416}

/* tp-nav */

.mobx header .tpnav{display:none}
@media(min-width:761px){
 .mobx header .nav{display:flex!important;align-items:center!important}
 .mobx header .tpnav{display:flex!important;align-items:center!important;gap:32px!important;margin-left:auto!important}
 .mobx header .tpnav a{font:600 12.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
   letter-spacing:.75px!important;color:#5c584f!important;text-decoration:none!important;white-space:nowrap!important;
   display:inline-flex!important;align-items:center!important;transition:color .18s ease!important}
 .mobx header .tpnav a:hover{color:#141416!important}
 .mobx header .tpnav a.tpnav-cta{height:32px!important;padding:0 14px!important;border-radius:99px!important;
   background:#c4ab67!important;color:#fff!important;font-size:11.8px!important;letter-spacing:.708px!important;
   margin-left:6px!important;box-shadow:none!important;filter:none!important}
 .mobx header .tpnav a.tpnav-cta:hover{background:#b89947!important;color:#fff!important}
 .mobx header .burger{display:none!important}
 .mobx .mmenu{display:none!important}
 .mobx header .tpsubbtn{display:none!important}
}

/* tp-own */

@media(min-width:761px){
/* The Position stands on its own: no orange square, no publisher line in the masthead */
.mobx header .brand .ic,.mobx header .lg .ic{display:none!important}
.mobx header .brand{gap:0!important}
.mobx>.mast .pub{display:none!important}
}

/* tp-modal */

#subwrap{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;padding:22px}
#subwrap.on{display:flex}
#subwrap .sbd{position:absolute;inset:0;background:rgba(14,14,16,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
#subwrap .scard2{position:relative;width:100%;max-width:452px;background:#f4f3f1;border-radius:22px;
  /* the fine print under the form is gone, so the box is re-fitted: the ink
     sat 37 below the top edge and 34 above the bottom one. */
  padding:37px 38px 36px;box-shadow:0 30px 70px -20px rgba(14,14,16,.55);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  animation:subIn .26s cubic-bezier(.2,.9,.3,1) both}
@keyframes subIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
#subwrap .sx{position:absolute;top:16px;right:16px;width:32px;height:32px;border:0;border-radius:50%;
  background:rgba(20,20,22,.06);color:#5c584f;font-size:17px;line-height:1;cursor:pointer;display:flex;
  align-items:center;justify-content:center}
#subwrap .sx:hover{background:rgba(20,20,22,.12);color:#141416}
#subwrap .seyebrow{font:700 11px/1 -apple-system,sans-serif;letter-spacing:2.8px;text-transform:uppercase;color:#8b8781}
#subwrap h3{font-family:Georgia,'Times New Roman',serif;font-size:27px;line-height:1.15;font-weight:600;
  color:#141416;margin:14px 0 0;letter-spacing:-.01em}
#subwrap p.sp{font-size:15px;line-height:1.55;color:#4a4a52;margin:11px 0 0}
#subwrap form{margin-top:22px}
#subwrap input{width:100%;height:48px;padding:0 17px;border:1px solid rgba(20,20,22,.20);border-radius:12px;
  background:#fff;font-size:15.5px;color:#141416;font-family:inherit;outline:none;margin-top:10px}
#subwrap input:first-of-type{margin-top:0}
#subwrap input:focus{border-color:#c4ab67}
#subwrap button.sgo{width:100%;height:48px;margin-top:14px;border:0;border-radius:99px;background:#c4ab67;color:#fff;
  font:700 14.5px/1 -apple-system,sans-serif;letter-spacing:.05em;cursor:pointer}
#subwrap button.sgo:hover{background:#b89947}
#subwrap .snote{margin-top:13px;font-size:12.5px;line-height:1.5;color:#8b8781;text-align:center}
#subwrap .sdone{display:none;text-align:center;padding:6px 0 2px}
#subwrap .sdone .tick{width:42px;height:42px;border-radius:50%;background:#c4ab67;color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:20px;margin:0 auto 16px}
#subwrap.done form,#subwrap.done .snote,#subwrap.done p.sp,#subwrap.done>.scard2>h3,#subwrap.done>.scard2>.seyebrow{display:none}
#subwrap.done .sdone{display:block}
html.sublock,html.sublock body{overflow:hidden}
@media(max-width:760px){#subwrap .scard2{padding:32px 24px 28px;border-radius:18px}#subwrap h3{font-size:23px}}

/* tp-desk-banner */

@media(min-width:761px){
.mobx>.mast{height:411px!important;min-height:411px!important;padding:31px 46px 34px!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;
  gap:0!important;row-gap:0!important;background:#f4f3f1!important;background-image:none!important;
  border-bottom:3px solid #c4ab67!important}
.mobx>.mast .pub{display:none!important}
.mobx>.mast .masteyebrow{display:block!important;order:-1!important;margin:0!important;padding:0!important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  font-size:14.3px!important;font-weight:700!important;letter-spacing:3.2px!important;line-height:23px!important;
  text-transform:uppercase!important;color:#876c22!important;text-align:center!important}

.mobx>.mast .schbr{display:inline!important}
.mobx>.mast .tag{display:none!important}
.mobx>.mast .mastrule{display:block!important;width:70px!important;height:4px!important;border-radius:99px!important;
  background:#c4ab67!important;margin:7px 0 0!important;padding:0!important}
.mobx>.mast .sched{background:none!important;background-color:transparent!important;border:0!important;
  box-shadow:none!important;border-radius:0!important;padding:0!important;margin:16px 0 0!important;
  font-family:"Iowan Old Style",Palatino,Georgia,Cambria,serif!important;
  font-size:18.2px!important;line-height:29px!important;letter-spacing:normal!important;font-weight:400!important;
  color:#4a4a52!important;text-transform:none!important;display:block!important;width:auto!important;
  height:auto!important;min-height:0!important;text-align:center!important}
.mobx>.mast .sched::before,.mobx>.mast .sched::after{content:none!important;display:none!important}
.mobx>.mast a.mastcta{display:inline-flex!important;align-items:center!important;justify-content:center!important;
  margin:57px 0 0!important;height:56px!important;min-height:56px!important;padding:0 28px!important;border-radius:99px!important;
  background:#c4ab67!important;color:#fff!important;
  font:600 15px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  letter-spacing:.9px!important;text-decoration:none!important;text-transform:none!important;border:0!important;
  box-shadow:none!important;white-space:nowrap!important}
}

/* tp-desk-sections */

@media(min-width:761px){
.mobx>section{border-top:1px solid #e5e0d5!important;border-bottom:0!important}
.mobx>section.cover{padding-top:26px!important}
.mobx>section+section{padding-top:24px!important}
.mobx>.mast{padding-bottom:31px!important}
}

/* tp-banner-b */

@media(min-width:761px){
/* nameplate leads; kicker is one tracked caps line; Miami sits beside Subscribe */

.mobx>.mast .mastrule{width:120px!important;height:5px!important;margin:20px 0 0!important}
.mobx>.mast .sched{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  font-size:13px!important;font-weight:700!important;letter-spacing:4.2px!important;text-transform:uppercase!important;
  line-height:22px!important;color:#8b8781!important;margin:15px 0 0!important}
.mobx>.mast .schbr{display:none!important}
.mobx>.mast a.mastcta{margin:93px 0 0!important}
.mobx>.mast .masteyebrow{position:absolute!important;top:336px!important;
  right:calc(50% + 68.5px + 26px)!important;left:auto!important;margin:0!important;
  font-size:12.5px!important;font-weight:700!important;letter-spacing:3.6px!important;
  line-height:26px!important;color:#8b8781!important;white-space:nowrap!important;text-align:right!important}
}

/* tp-banner-c */

@media(max-width:760px){
.mobx>.mast .mastfoot{display:contents!important}
}
@media(min-width:761px){
.mobx>.mast .masteyebrow{position:static!important;top:auto!important;right:auto!important;margin:0!important;
  font-size:12.5px!important;font-weight:700!important;letter-spacing:3.6px!important;line-height:26px!important;
  color:#8b8781!important;white-space:nowrap!important}
.mobx>.mast .mastfoot{display:flex!important;align-items:center!important;justify-content:center!important;
  gap:26px!important;margin:0!important;width:100%!important}
.mobx>.mast a.mastcta{margin:0!important}
/* kicker, then the rule under it */
.mobx>.mast .mastrule{order:9!important;margin:20px 0 0!important;width:120px!important;height:5px!important}
.mobx>.mast .sched{order:8!important;margin:20px 0 0!important}
.mobx>.mast .mastfoot{order:10!important;margin-top:88px!important}
}

/* tp-dmast */

.dmast{display:none}
@media(min-width:761px){
.mobx>.mast{padding:72px 46px 30px!important;display:flex!important;flex-direction:column!important;
  align-items:center!important;justify-content:flex-start!important;height:411px!important;min-height:411px!important}
.mobx>.mast>:not(.dmast){display:none!important}
.mobx>.mast .dmast{display:flex!important;flex-direction:column!important;align-items:center!important;
  justify-content:center!important;width:100%!important;margin:0!important;padding:0!important}
.mobx>.mast .dm-row{position:relative!important;display:block!important;width:100%!important;
  gap:0!important;margin:0!important;padding:0!important}
.mobx>.mast .dm-plate{display:block!important;width:760px!important;height:auto!important;max-width:none!important;
  margin:0 auto!important;padding:0!important;filter:none!important}
.mobx>.mast .dm-div{position:absolute!important;top:50%!important;transform:translateY(-50%)!important;
  left:calc(50% + 402px)!important;display:block!important;width:1px!important;height:88px!important;
  background:#141416!important;flex:0 0 auto!important;margin:0!important}
.mobx>.mast .dm-kick{position:absolute!important;top:50%!important;transform:translateY(-50%)!important;
  left:calc(50% + 430px)!important;display:flex!important;flex-direction:column!important;gap:7px!important;
  text-align:left!important;margin:0!important;padding:0!important}
.mobx>.mast .dm-kick span{display:block!important;font:700 15px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  letter-spacing:4.4px!important;text-transform:uppercase!important;color:#141416!important;margin:0!important}
.mobx>.mast .dm-idx{display:flex!important;align-items:center!important;justify-content:center!important;
  width:100%!important;margin:90px 0 0!important;padding:17px 0!important;
  border-top:1px solid rgba(20,20,22,.18)!important;border-bottom:1px solid rgba(20,20,22,.18)!important}
.mobx>.mast .dm-idx a{font:700 11.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  letter-spacing:3px!important;text-transform:uppercase!important;color:#141416!important;
  text-decoration:none!important;padding:0 32px!important;margin:0!important;transition:color .18s ease!important}
.mobx>.mast .dm-idx a:hover{color:#876c22!important}
.mobx>.mast .dm-idx i{display:block!important;width:1px!important;height:13px!important;
  background:rgba(20,20,22,.20)!important;flex:0 0 auto!important;margin:0!important}
.mobx>.mast .dm-meta{display:flex!important;align-items:center!important;justify-content:center!important;
  width:100%!important;margin:38px 0 0!important;padding:0!important}
.mobx>.mast .dm-meta span{font:700 11.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  letter-spacing:3.4px!important;text-transform:uppercase!important;color:#141416!important;margin:0!important}
.mobx>.mast .dm-sub{font:700 11.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  letter-spacing:3.4px!important;text-transform:uppercase!important;color:#876c22!important;text-decoration:none!important;
  border-bottom:1px solid rgba(196,171,103,.45)!important;padding-bottom:3px!important;margin:0!important}
}
@media(max-width:760px){.mobx>.mast .dmast{display:none!important}}

/* tp-sleek */

@media(min-width:761px){
/* ---------- header: one navigation voice, no pill ---------- */
.mobx header{background:#ffffff!important;border-bottom:1px solid rgba(20,20,22,.14)!important}
.mobx header .nav{padding:0 46px!important;height:56px!important}
.mobx header .navleft{align-items:center!important}
.mobx header .brand{font:400 15.5px/1 "Iowan Old Style",Georgia,"Times New Roman",Times,serif!important;
 letter-spacing:.1px!important;color:#141416!important;margin-right:0!important}
.mobx header .navleft>.hdivider{width:1px!important;height:14px!important;background:#141416!important;
 margin:0 12px!important;border:0!important;flex:0 0 auto!important;align-self:center!important}
.mobx header .hx{width:15px!important;height:15px!important;color:#141416!important;opacity:.78!important}
.mobx header .hx svg{width:15px!important;height:15px!important;display:block!important}
.mobx header .hx:hover{opacity:1!important;color:#876c22!important}
.mobx header .tpnav{display:flex!important;align-items:center!important;gap:0!important}
.mobx header .tpnav a{font:700 10.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
 letter-spacing:2.4px!important;text-transform:uppercase!important;color:#141416!important;text-decoration:none!important;
 padding:0 18px!important;margin:0!important;background:none!important;border:0!important;border-radius:0!important;
 box-shadow:none!important;transition:color .18s ease!important}
.mobx header .tpnav a:hover{color:#876c22!important}
/* Subscribe: squared, ink — the site has no other rounded object */
.mobx header .tpnav a.tpnav-cta{margin-left:20px!important;padding:11px 20px!important;background:#141416!important;
 color:#f4f3f1!important;border-radius:2px!important;letter-spacing:2.4px!important;font-size:10.5px!important}
.mobx header .tpnav a.tpnav-cta:hover{background:#c4ab67!important;color:#fff!important}
.mobx header .tpsubbtn{display:none!important}

/* ---------- masthead: air moved off the bottom, into the middle ---------- */
.mobx>.mast{padding:40px 46px 0!important}
.mobx>.mast .dm-idx{margin-top:78px!important}
.mobx>.mast .dm-meta{margin-top:37px!important}
/* rail stays centred; rule pulled in so it reads as the nameplate's base, not a full-bleed stripe */
.mobx>.mast .dm-idx{width:1000px!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important}
}

/* tp-foot3 */

footer.tpfoot{display:block!important;background:#141416!important;padding:0!important;margin:0!important;
 border:0!important;border-top:1px solid #c4ab67!important}
.mobx>section.cover{border-top:0!important}

footer.tpfoot .tpf-in{max-width:1348px!important;margin:0 auto!important;padding:0 46px!important}
footer.tpfoot .tpf-row{display:flex!important;align-items:center!important;justify-content:space-between!important;
 gap:40px!important;padding:44px 0 40px!important}
footer.tpfoot .tpf-id{display:block!important;white-space:nowrap!important;line-height:1!important;flex:0 0 auto!important}
footer.tpfoot .tpf-mark{display:inline!important;vertical-align:baseline!important;text-decoration:none!important;
 font:400 21px/1 "Iowan Old Style",Georgia,"Times New Roman",Times,serif!important;color:#f4f3f1!important;letter-spacing:.1px!important}
footer.tpfoot .tpf-mark:hover{color:#876c22!important}
footer.tpfoot .tpf-tag{display:inline!important;vertical-align:baseline!important;white-space:nowrap!important;
 font:400 14.5px/1 "Iowan Old Style",Georgia,serif!important;color:#87837c!important;
 border-left:1px solid rgba(244,243,241,.22)!important;margin-left:19px!important;padding-left:19px!important}
footer.tpfoot .tpf-soc{display:flex!important;align-items:center!important;gap:0!important;flex:0 0 auto!important}
footer.tpfoot .tpf-ico{display:flex!important;align-items:center!important;justify-content:center!important;
 width:19px!important;height:19px!important;color:#c8c4bd!important}
footer.tpfoot .tpf-ico:hover{color:#876c22!important}
footer.tpfoot .tpf-ico svg{display:block!important;width:19px!important;height:19px!important}
footer.tpfoot .tpf-sep{display:block!important;width:1px!important;height:15px!important;
 background:rgba(244,243,241,.22)!important;margin:0 19px!important;flex:0 0 auto!important}
footer.tpfoot .tpf-bar{display:flex!important;align-items:center!important;justify-content:space-between!important;
 gap:30px!important;padding:19px 0 26px!important;border-top:1px solid rgba(244,243,241,.14)!important}
footer.tpfoot .tpf-bar>*{position:static!important;top:auto!important;left:auto!important;right:auto!important;
 bottom:auto!important;transform:none!important;margin:0!important;background:none!important;border:0!important;
 border-radius:0!important;padding:0!important;width:auto!important;height:auto!important;box-shadow:none!important;
 line-height:1!important;display:inline-block!important;
 font:700 9.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
 letter-spacing:2.2px!important;text-transform:uppercase!important;text-decoration:none!important;
 white-space:nowrap!important}
footer.tpfoot .tpf-pub{color:#a8a49d!important}
footer.tpfoot .tpf-top{color:#7a766f!important}
footer.tpfoot .tpf-pub:hover,footer.tpfoot .tpf-top:hover{color:#876c22!important}
footer.tpfoot .tpf-top span,footer.tpfoot .tpf-top::before,footer.tpfoot .tpf-pub::after{display:none!important;content:none!important}
@media(max-width:760px){
 footer.tpfoot .tpf-in{padding:0 22px!important}
 footer.tpfoot .tpf-row{padding:34px 0 30px!important;gap:24px!important}
 footer.tpfoot .tpf-mark{font-size:19px!important}
 footer.tpfoot .tpf-tag{font-size:13.5px!important;margin-left:14px!important;padding-left:14px!important}
 footer.tpfoot .tpf-bar{padding:17px 0 28px!important}
}
@media(max-width:420px){
 footer.tpfoot .tpf-id{white-space:normal!important}
 footer.tpfoot .tpf-tag{display:block!important;border-left:0!important;margin:9px 0 0!important;padding:0!important}
}

/* tp-rules */

/* ---------- no orange structure: every section rule is black ---------- */
.tpmore,.tpcat,.tpband,.tpfeat,.tpgames{border-top:1px solid #141416!important}
footer.tpfoot{border-top:1px solid #141416!important}
@media(min-width:761px){
 /* banner closes on a black rule, not orange */
 .mobx>.mast{border-bottom:2px solid #141416!important}
 /* ---------- the index becomes a double-ruled box ---------- */
 .mobx>.mast .dm-idx{border:1px solid #141416!important;
  box-shadow:inset 0 0 0 4px #f4f3f1, inset 0 0 0 5px #141416!important;
  padding:21px 30px!important;width:1000px!important;max-width:100%!important;
  margin-left:auto!important;margin-right:auto!important}
 .mobx>.mast .dm-idx a{padding:0 26px!important}
}

/* tp-hd3 */

/* section titles: orange, with their own underline — the grey hairline goes */
.tpmore-hd,.tpg-hd{border-bottom:0!important;padding-bottom:0!important;margin:0 0 26px!important}
.tpmore-hd h2,.tpg-hd h2{color:#876c22!important;border-bottom:1px solid #c4ab67!important;
 padding-bottom:9px!important;display:inline-block!important}
/* the splash wordmark was a 760px file drawn at 1240 device px — use the 1600px art */
.tpsplash-mark{image-rendering:auto!important}

/* tp-hd4 */

.tpmore-hd h2,.tpg-hd h2{font:700 19px/1.1 "Iowan Old Style",Georgia,"Times New Roman",Times,serif!important;
 letter-spacing:-.1px!important;color:#141416!important;border-bottom:0!important;padding-bottom:0!important;
 margin:0!important;display:block!important}
.tpmore-hd,.tpg-hd{border-bottom:0!important;padding-bottom:0!important;margin:0 0 24px!important;
 align-items:baseline!important}

/* tp-fix5 */

/* the nameplate was a 760px file drawn at 1520 device px — 2x upscale, which fattens every stroke */
.mobx>.mast .dm-plate{image-rendering:auto!important}
/* splash: lift the frame off the flat water and close the bottom edge */
.tpsplash{background-position:50% 34%!important;background-size:auto 122%!important}
.tpsplash::after{content:""!important;position:absolute!important;left:0!important;right:0!important;bottom:0!important;
 height:32%!important;pointer-events:none!important;
 background:linear-gradient(to bottom,rgba(244,243,241,0) 0%,rgba(244,243,241,.35) 55%,rgba(244,243,241,.82) 100%)!important}
@media(max-width:760px){
 .tpsplash{background-position:50% 36%!important;background-size:auto 118%!important}
}

/* tp-matchcut */

/* the opening wordmark lands on the banner nameplate exactly: same file, same width, same y.
   desktop target measured at top 128, left 340, 760 wide. mobile: top 125, 300 wide. */
.tpsplash-in{position:absolute!important;top:96px!important;left:0!important;right:0!important;
 width:auto!important;margin:0!important;padding:0!important;text-align:center!important;
 display:block!important;transform:none!important}
.tpsplash-mark{display:block!important;width:760px!important;max-width:none!important;height:auto!important;
 margin:0 auto!important;
 filter:drop-shadow(0 0 26px rgba(255,255,255,.92)) drop-shadow(0 0 60px rgba(255,255,255,.7))!important}
.tpsplash-pub{position:absolute!important;left:0!important;right:0!important;bottom:100%!important;
 margin:0 0 26px!important;text-align:center!important}
.tpsplash-bar{margin:34px auto 0!important}
@media(max-width:760px){
 .tpsplash-in{top:125px!important}
 .tpsplash-mark{width:300px!important;
  filter:drop-shadow(0 0 18px rgba(255,255,255,.92)) drop-shadow(0 0 44px rgba(255,255,255,.7))!important}
 .tpsplash-pub{margin:0 0 20px!important}
 .tpsplash-bar{margin:26px auto 0!important}
}

/* tp-open2 */

/* opening screen: the wordmark and nothing else */
.tpsplash-pub,.tpsplash-bar{display:none!important}

/* tp-open3 */

/* the tallest tower rises to y105 and the wordmark ink starts at y110 — it was being cut.
   Zooming the photo enough to clear it would soften it, so the wordmark gets its own
   field of paper instead: an ellipse centred on the type, near-solid at the centre. */
.tpsplash::before{
 background:radial-gradient(62% 15% at 50% 12.2%,
   rgba(244,243,241,.985) 0%,
   rgba(244,243,241,.965) 38%,
   rgba(244,243,241,.80) 62%,
   rgba(244,243,241,.34) 82%,
   rgba(244,243,241,0) 100%)!important}
.tpsplash-mark{filter:none!important}
@media(max-width:760px){
 .tpsplash::before{background:radial-gradient(86% 12% at 50% 15.5%,
   rgba(244,243,241,.985) 0%,rgba(244,243,241,.96) 40%,
   rgba(244,243,241,.72) 66%,rgba(244,243,241,0) 100%)!important}
}

/* tp-open4 */

/* wordmark ink sits at 11%-24% of the frame; the tallest roofline reaches 12%.
   Rather than zoom the photo (which softens it), the top of the frame is paper and
   the city rises out of it. Nothing crosses the type, and the edge is a gradient, not a band. */
.tpsplash::before{
 background:linear-gradient(to bottom,
   rgba(244,243,241,.99) 0%,
   rgba(244,243,241,.985) 22%,
   rgba(244,243,241,.93) 28%,
   rgba(244,243,241,.62) 36%,
   rgba(244,243,241,.24) 46%,
   rgba(244,243,241,0) 60%)!important}
@media(max-width:760px){
 .tpsplash::before{background:linear-gradient(to bottom,
   rgba(244,243,241,.99) 0%,rgba(244,243,241,.985) 26%,
   rgba(244,243,241,.9) 33%,rgba(244,243,241,.5) 43%,
   rgba(244,243,241,0) 60%)!important}
}

/* tp-polish */

@media(min-width:761px){
/* nameplate settles between the two positions you bracketed: 52 read low, 40 read high */
.mobx>.mast{padding:46px 46px 0!important}
/* meta row carries the date opposite the cadence, inside the rail's measure */
.mobx>.mast .dm-meta{width:1000px!important;max-width:100%!important;margin:34px auto 0!important;
 display:flex!important;align-items:baseline!important;justify-content:space-between!important}
.mobx>.mast .dm-date{font:700 11.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
 letter-spacing:3.4px!important;text-transform:uppercase!important;color:#141416!important;white-space:nowrap!important}
/* the opening screen carries the whole masthead lockup, not just the wordmark */
.tpsplash-in{top:102px!important}
.tps-lock2{position:relative!important;width:760px!important;margin:0 auto!important}
.tps-kick{position:absolute!important;top:50%!important;transform:translateY(-50%)!important;
 left:calc(100% + 50px)!important;display:flex!important;flex-direction:column!important;gap:7px!important;
 text-align:left!important;white-space:nowrap!important}
.tps-kick span{display:block!important;font:700 15px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
 letter-spacing:4.4px!important;text-transform:uppercase!important;color:#141416!important}
.tps-div{position:absolute!important;top:50%!important;transform:translateY(-50%)!important;
 left:calc(100% + 22px)!important;width:1px!important;height:88px!important;background:#141416!important}
}
@media(max-width:760px){
 .tps-kick,.tps-div{display:none!important}
 .tps-lock2{width:300px!important;margin:0 auto!important}
 .mobx>.mast .dm-date{display:none!important}
}

/* tp-mobpolish */

@media(max-width:760px){
 /* one system on both breakpoints: black rules, squared button, same kicker colour */
 .mobx>.mast{border-bottom:2px solid #141416!important}
 .mobx>.mast .masteyebrow{color:#141416!important;letter-spacing:3.2px!important}
 .mobx>.mast a.mastcta{background:#141416!important;color:#f4f3f1!important;border-radius:2px!important;
  font:700 10.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
  letter-spacing:2.4px!important;text-transform:uppercase!important}
 .mobx header .tpsubbtn{background:#141416!important;color:#f4f3f1!important;border-radius:2px!important;
  font:700 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
  letter-spacing:2.2px!important;text-transform:uppercase!important}
}

/* tp-noanim */

.tpsplash-in{animation:none!important;transform:none!important}

/* tp-final2 */

@media(min-width:761px){
 /* the rule and the X were riding 1.6 and 2.0 px below the wordmark's optical centre */
 .mobx header .nav .navleft>.hdivider{position:relative!important;top:-1.2px!important}
 .mobx header .nav .navleft a.hx{position:relative!important;top:-2px!important}
 /* masthead sits on a slightly cooler paper than the page — subtle, but it separates */
 .mobx>.mast{background:#eceae6!important}
 .tpsplash::before{background:linear-gradient(to bottom,
   rgba(236,234,230,.99) 0%,rgba(236,234,230,.985) 22%,rgba(236,234,230,.93) 28%,
   rgba(236,234,230,.62) 36%,rgba(236,234,230,.24) 46%,rgba(236,234,230,0) 60%)!important}
}
@media(max-width:760px){
 .mobx>.mast{background:#eceae6!important}
 .tpsplash::before{background:linear-gradient(to bottom,
   rgba(236,234,230,.99) 0%,rgba(236,234,230,.985) 26%,rgba(236,234,230,.9) 33%,
   rgba(236,234,230,.5) 43%,rgba(236,234,230,0) 60%)!important}
}
/* Back to top: centred under the two marks, underlined, with room to breathe */
footer.tpfoot .tpf-r{align-items:center!important;gap:0!important}
footer.tpfoot .tpf-top{margin-top:13px!important;padding-bottom:5px!important;
 border-bottom:1px solid rgba(244,243,241,.28)!important}
footer.tpfoot .tpf-top:hover{border-bottom-color:#c4ab67!important}
@media(max-width:760px){
 footer.tpfoot .tpf-r{align-items:flex-start!important}
}

/* tp-uniform */

/* ---------- one ground for the whole page ---------- */
html,body{background:#eceae6!important}
.mobx,.mobx>.mast,.cover,.tpmore,.tpgames,.mobx>section,.mobx section{background:#eceae6!important}
.tpmore-c img{background:#e2ded7!important}
/* ---------- the games: no colour, one tone ladder ---------- */
.tpg-card{background:#eceae6!important}
.tpg-t{background:#ddd8d0!important}
.tpg-t:hover{background:#d2ccc3!important}
.tpg-t.sel{background:#141416!important;color:#eceae6!important}
.tpg-sol.c0{background:#e2ded7!important}
.tpg-sol.c1{background:#d2ccc3!important}
.tpg-sol.c2{background:#c1bab0!important}
.tpg-sol.c3{background:#b0a89d!important}
.tpg-sol b,.tpg-sol span{color:#141416!important}
.tpf-t{background:transparent!important;border-color:rgba(20,20,22,.24)!important}
.tpf-t.hit{background:#141416!important;border-color:#141416!important;color:#eceae6!important}
.tpf-t.near{background:#b8b1a7!important;border-color:#b8b1a7!important;color:#141416!important}
.tpf-t.miss{background:#ddd8d0!important;border-color:#ddd8d0!important;color:#6f6b65!important}
.tpf-key{background:#ddd8d0!important}
.tpf-key:hover{background:#d2ccc3!important}
.tpf-key.hit{background:#141416!important;color:#eceae6!important}
.tpf-key.near{background:#b8b1a7!important;color:#141416!important}
.tpf-key.miss{background:#cbc5bb!important;color:#8b8781!important}
.tps-c{background:#ddd8d0!important}
.tps-c:hover{background:#d2ccc3!important}
.tps-c.sel{background:#141416!important;color:#eceae6!important}
.tps-c.got{background:#b8b1a7!important;color:#141416!important}
.tpm-c{background:#f7f6f4!important}
.tpm-c.line{background:#ddd8d0!important}
.tpm-c.sel{background:#b8b1a7!important}
.tpm-c.blk{background:#141416!important}
/* the game card marks lose their orange too */
/* the strip marks keep their accent — it is the playing surfaces that stay monochrome */
.tpgames .f0{fill:#141416}
.tpgames .f1{fill:#c4ab67}
.tpgames .f2{fill:#e6e2db}
.tpgames .f3{fill:rgba(20,20,22,.3)}
.tpgames .s0{stroke:#141416}
.tpgames .s1{stroke:#c4ab67}
/* no orange inside the games — hovers and buttons stay in the ladder */
.tpg-b.pri{background:#141416!important;color:#eceae6!important}
.tpg-b.pri:hover{background:#4a4740!important;border-color:#4a4740!important;color:#eceae6!important}
.tpg-b:hover{background:#141416!important;color:#eceae6!important}
.tpg-b[disabled],.tpg-b[disabled]:hover{background:#cbc5bb!important;border-color:#cbc5bb!important;
 color:#8b8781!important;opacity:1!important}
.tpg-b.pri[disabled],.tpg-b.pri[disabled]:hover{background:#cbc5bb!important;color:#8b8781!important}
.tpg-x:hover{color:#141416!important}
.tpm-clues li:hover{color:#141416!important}
.tpc-play:hover{background:#141416!important;color:#eceae6!important;border-color:#141416!important}
.tpg-lives i{background:#141416!important}
.tpg-lives i.out{background:#cbc5bb!important}

/* tp-uniform2 */

/* the page goes back to paper; only the masthead keeps the cooler tone */
html,body{background:#f4f3f1!important}
.mobx,.cover,.tpmore,.tpgames,.mobx>section,.mobx section{background:#f4f3f1!important}
.mobx>.mast{background:#eceae6!important}
.tpmore-c img{background:#e6e2db!important}
.tpg-card{background:#e6e3de!important}   /* Variety's band colour, 2026-09-17 - all eight puzzles share this one rule */
.tpm-c{background:#fff!important}
.tpm-c.line{background:#e2ded7!important}
.tpm-c.sel{background:#b8b1a7!important}
.tpm-c.blk{background:#141416!important}

/* ---------- footer: one line for the wordmark, the links and Back to top ---------- */
footer.tpfoot .tpf-in{align-items:flex-start!important;padding:36px 46px 38px!important}
footer.tpfoot .tpf-l{gap:10px!important}
footer.tpfoot .tpf-c{display:flex!important;flex-direction:column!important;align-items:center!important;
 gap:16px!important;flex:1 1 auto!important;margin-top:5.5px!important}
footer.tpfoot .tpf-mid{justify-content:center!important}
footer.tpfoot .tpf-r{display:block!important;flex:0 0 auto!important;margin-top:2.7px!important}
footer.tpfoot .tpf-r .tpf-top{margin-top:0!important}
footer.tpfoot .tpf-soc{margin:0!important}
@media(max-width:760px){
 footer.tpfoot .tpf-c{align-items:flex-start!important;margin-top:0!important}
 footer.tpfoot .tpf-r{margin-top:0!important}
}

/* tp-say */

/* one line under the masthead: what this is, and the only place to subscribe.
   !important throughout — the site reset flattens any new div to display:block. */
.tpsay{display:block!important;background:#f4f3f1!important;border-bottom:1px solid rgba(20,20,22,.14)!important;margin:0!important;padding:0!important}
.tpsay-in{max-width:1348px!important;margin:0 auto!important;padding:22px 0 24px!important;
 display:flex!important;align-items:center!important;justify-content:space-between!important;gap:40px!important}
.tpsay-in p{margin:0!important;padding:0!important;
 font:400 16.5px/1.4 "Iowan Old Style",Georgia,"Times New Roman",Times,serif!important;
 color:#3a3833!important;max-width:62ch!important}
.tpsay-f{display:flex!important;gap:8px!important;flex:0 0 auto!important;margin:0!important;padding:0!important;
 width:auto!important;max-width:none!important}
.tpsay-f input{display:block!important;width:250px!important;padding:11px 13px!important;
 border:1px solid rgba(20,20,22,.28)!important;background:transparent!important;border-radius:2px!important;
 font:400 14.5px/1 "Iowan Old Style",Georgia,serif!important;color:#141416!important;margin:0!important}
.tpsay-f input::placeholder{color:#8b8781!important}
.tpsay-f input:focus{outline:0!important;border-color:#141416!important}
.tpsay-f button{display:block!important;padding:11px 20px!important;border:0!important;border-radius:2px!important;
 background:#141416!important;color:#f4f3f1!important;cursor:pointer!important;margin:0!important;
 font:700 10.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
 letter-spacing:2.4px!important;text-transform:uppercase!important;white-space:nowrap!important}
.tpsay-f button:hover{background:#c4ab67!important}
.tpsay-done{display:none!important;font:400 15px/1.4 "Iowan Old Style",Georgia,serif!important;
 color:#141416!important;flex:0 0 auto!important;margin:0!important}
.tpsay.ok .tpsay-f{display:none!important}
.tpsay.ok .tpsay-done{display:block!important}
@media(max-width:760px){
 .tpsay-in{flex-direction:column!important;align-items:flex-start!important;gap:16px!important;padding:20px 22px 24px!important;max-width:none!important}
 .tpsay-in p{font-size:15.5px!important;max-width:none!important}
 .tpsay-f{width:100%!important}
 .tpsay-f input{flex:1 1 auto!important;width:auto!important}
}
footer.tpfoot .tpf-r{margin-top:-4px!important}

/* tp-lines */

/* every rule on the page is the same hairline — nothing heavier */
.mobx>.mast{border-bottom:1px solid #141416!important}
.tpmore,.tpgames,.tpsay{border-top:1px solid #141416!important}
footer.tpfoot{border-top:1px solid #141416!important}
/* the standfirst now sits last, above the footer */
.tpsay{border-bottom:0!important}
/* ---------- footer: two rows ---------- */
footer.tpfoot .tpf-in{display:block!important;padding:34px 46px 36px!important}
footer.tpfoot .tpf-row1{display:flex!important;align-items:center!important;justify-content:space-between!important;
 gap:36px!important;width:100%!important;margin:0!important;padding:0!important;max-width:none!important}
/* the link chain hangs on the page axis, half way between the two rows */
footer.tpfoot .tpf-row1{position:relative!important}
footer.tpfoot .tpf-mid{align-items:center!important;position:absolute!important;
 left:50%!important;transform:translateX(-50%)!important;top:30.5px!important;
 margin:0!important;flex:0 0 auto!important;white-space:nowrap!important}
/* Back to top carries an underline, so its box centre sits 3.25px below its text centre */
footer.tpfoot .tpf-row1 .tpf-top{position:relative!important;top:-3.25px!important;
 right:auto!important;left:auto!important;bottom:auto!important;margin:0!important}
footer.tpfoot .tpf-row2{display:flex!important;align-items:center!important;justify-content:space-between!important;
 gap:36px!important;margin:30px 0 0!important;padding:0!important;width:100%!important;max-width:none!important}
footer.tpfoot .tpf-mid{flex:1 1 auto!important;justify-content:center!important;display:flex!important;align-items:baseline!important}
footer.tpfoot .tpf-top{margin:0!important}
footer.tpfoot .tpf-soc{margin:0!important;flex:0 0 auto!important}
footer.tpfoot .tpf-pub{flex:0 0 auto!important}
@media(max-width:760px){
 footer.tpfoot .tpf-in{padding:30px 22px 32px!important}
 footer.tpfoot .tpf-row1{flex-direction:column!important;align-items:flex-start!important;gap:18px!important}
 footer.tpfoot .tpf-row2{margin-top:24px!important}
 footer.tpfoot .tpf-mid{justify-content:flex-start!important;flex-wrap:wrap!important}
}

/* tp-rhythm */

/* ---------- one left margin for everything on the page ---------- */
footer.tpfoot .tpf-in{padding-left:0!important;padding-right:0!important;
 max-width:1348px!important;margin:0 auto!important}
/* ---------- one vertical rhythm: every section 46 above, 50 below ---------- */
.cover,.tpmore,.tpgames,.tpsay{padding:0!important}
.tpmore-in,.tpg-in,.tpsay-in{max-width:1348px!important;margin:0 auto!important;padding-left:0!important;padding-right:0!important}
/* each section ends 50px below its last line of ink — the trailing elements carry
   different margins, so the box padding differs to make the optical gap the same */
.tpmore-in{padding:46px 0 44px!important}
.tpg-in{padding:46px 0 30px!important}
.tpsay-in{padding:46px 0 50px!important}
.mobx>section.cover,.mobx section.cover{padding:46px 46px 42px!important}
/* ---------- every section carries the same bold title ---------- */
.tpsec-hd{display:flex!important;align-items:baseline!important;justify-content:space-between!important;
 gap:16px!important;margin:0 0 24px!important;padding:0!important;border:0!important}
.tpsec-hd h2{margin:0!important;padding:0!important;border:0!important;
 font:700 19px/1.1 "Iowan Old Style",Georgia,"Times New Roman",Times,serif!important;
 letter-spacing:-.1px!important;color:#141416!important;display:block!important}
.tpmore-hd,.tpg-hd{margin:0 0 24px!important}
.tpsay-in{display:block!important}
.tpsay-body{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:40px!important}
@media(max-width:760px){
 .tpmore-in,.tpg-in,.tpsay-in{padding:34px 22px 38px!important}
 .mobx>section.cover,.mobx section.cover{padding:34px 22px 38px!important}
 footer.tpfoot .tpf-in{padding-left:22px!important;padding-right:22px!important}
 .tpsay-body{flex-direction:column!important;align-items:flex-start!important;gap:16px!important}
}

/* tp-grid46 */

/* every wrapper insets 46 from the viewport edge and caps at 1440, so the left margin
   holds at every window width — max-width:1348 with no padding collapsed to 0 below 1348 */
.tpmore-in,.tpg-in,.tpsay-in,footer.tpfoot .tpf-in{
 max-width:1440px!important;margin:0 auto!important;
 padding-left:46px!important;padding-right:46px!important}
/* one title, one size, everywhere */
.mobx section.cover div.tpsec-hd h2,.mobx section.tpsay div.tpsec-hd h2,
.mobx div.tpmore-hd h2,.mobx div.tpg-hd h2,
.cover .tpsec-hd h2,.tpsay .tpsec-hd h2,.tpmore-hd h2,.tpg-hd h2,.tpsec-hd h2{
 font:700 19px/1.1 "Iowan Old Style",Georgia,"Times New Roman",Times,serif!important;
 letter-spacing:-.1px!important;color:#141416!important;margin:0!important;padding:0!important;
 border:0!important;display:block!important;text-transform:none!important}
@media(max-width:760px){
 .tpmore-in,.tpg-in,.tpsay-in,footer.tpfoot .tpf-in{
  padding-left:22px!important;padding-right:22px!important}
}

/* tp-type */

/* ══════════ one type scale for the whole page ══════════
   title    19   / 700 / serif / -0.1
   headline 30   / 700 / serif / -0.3   (the feature only)
   subhead  18.5 / 700 / serif / -0.2   (card and puzzle names)
   body     15   / 400 / serif / 1.55
   label    10   / 700 / sans  / 2.4 / uppercase
   The sections below the feature live OUTSIDE .mobx, so these selectors double the
   class for specificity instead of leaning on an ancestor that is not there. */
:root{--tp-serif:"Iowan Old Style",Georgia,"Times New Roman",Times,serif;
 --tp-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}

/* headline */
.mobx section.cover h2:not(.tpsec-hd h2){font:700 30px/1.14 var(--tp-serif)!important;
 letter-spacing:-.3px!important;color:#141416!important;margin:10px 0 14px!important}

/* subheads */
.tpmore-c.tpmore-c h3,.tpg-item.tpg-item .tpg-n{
 font:700 18.5px/1.22 var(--tp-serif)!important;letter-spacing:-.2px!important;color:#141416!important}

/* body */
.mobx section.cover .dek,
.tpmore-c.tpmore-c p,.tpg-item.tpg-item .tpg-d,.tpsay-body.tpsay-body p{
 font:400 15px/1.55 var(--tp-serif)!important;letter-spacing:normal!important;color:#4a4740!important}
.mobx section.cover .dek{margin:0 0 16px!important;max-width:62ch!important}
.tpmore-c.tpmore-c p{margin:0 0 12px!important;max-width:none!important}
.tpg-item.tpg-item .tpg-d{margin:0!important;max-width:24ch!important}
.tpsay-body.tpsay-body p{margin:0!important;max-width:62ch!important}

/* labels */
.mobx section.cover .eyebrow,.mobx section.cover .byline,.mobx section.cover a.readmore,
.tpmore-c.tpmore-c .k,.tpmore-c.tpmore-c .d,.tpmore-hd.tpmore-hd a,.tpg-item.tpg-item .tpg-soon{
 font:700 10px/1 var(--tp-sans)!important;letter-spacing:2.4px!important;text-transform:uppercase!important}
.mobx section.cover .eyebrow,.tpmore-c.tpmore-c .k{color:#876c22!important}
.tpmore-c.tpmore-c .d{color:#8b8781!important}
.tpmore-hd.tpmore-hd a{color:#876c22!important}
.tpsay-f.tpsay-f button{font:700 10px/1 var(--tp-sans)!important;letter-spacing:2.4px!important;text-transform:uppercase!important}
.tpsay-f.tpsay-f input{font:400 15px/1 var(--tp-serif)!important}

.mobx section.cover .byline{color:#8b8781!important;margin:0 0 14px!important}
.mobx section.cover a.readmore{color:#141416!important;border-bottom:1px solid #c4ab67!important;
 padding-bottom:4px!important;text-decoration:none!important;display:inline-block!important}
.mobx section.cover a.readmore:hover{color:#876c22!important}

/* tp-container */

/* ══ ONE container for the whole page ══
   Every band is full-bleed; every band's CONTENT sits in the same centred column:
   max 1440 wide, 46 inset. Above 1440 the column centres, so the left edge is
   identical in the header, the masthead, all four sections and the footer. */
.mobx header .nav,
.mobx>section.cover,
.tpmore-in,.tpg-in,.tpsay-in,
footer.tpfoot .tpf-in{
 box-sizing:border-box!important;
 width:100%!important;max-width:1440px!important;
 margin-left:auto!important;margin-right:auto!important;
 padding-left:46px!important;padding-right:46px!important}
/* the masthead's date row shares the same column so it lines up with the titles */
/* the mast pads its own sides, so the date row carries none — otherwise it doubles to 92 */
.mobx>.mast{padding-left:0!important;padding-right:0!important}
.mobx>.mast .dm-meta{box-sizing:border-box!important;width:100%!important;max-width:1440px!important;
 margin-left:auto!important;margin-right:auto!important;padding:0 46px!important}
.mobx>.mast .dm-idx{margin-left:auto!important;margin-right:auto!important}
@media(max-width:760px){
 .mobx header .nav,.mobx>section.cover,.tpmore-in,.tpg-in,.tpsay-in,footer.tpfoot .tpf-in{
  padding-left:22px!important;padding-right:22px!important}
 .mobx>.mast .dm-meta{padding:0 22px!important}
}

/* tp-boxgap */

/* the index sits equally between the nameplate's ink and the date line's ink:
   nameplate ends 164, date starts 335, box is 57 tall -> 57 of air on each side */
@media(min-width:761px){
 .mobx>.mast .dm-idx{margin-top:55.3px!important}
 .mobx>.mast .dm-meta{margin-top:56.7px!important}
}

/* tp-nohx */

/* the rule and the X come out of the header — The Position stands alone on the left */
.mobx header .navleft>.hdivider,.mobx header .navleft .hx,
.mobx header .nav .navleft>.hdivider,.mobx header .nav .navleft a.hx{display:none!important}
.mobx header .navleft .brand{margin-right:0!important}

/* tp-datehdr */

@media(min-width:761px){
 /* the date moves up beside the wordmark; the cadence takes the middle of the masthead */
 .mobx header .navleft{align-items:center!important}
 .mobx header .navleft .dm-date{display:inline-block!important;margin-left:22px!important;
  font:700 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  letter-spacing:2.4px!important;text-transform:uppercase!important;color:#8b8781!important;white-space:nowrap!important}
 .mobx>.mast .dm-meta{justify-content:center!important}
 .mobx>.mast .dm-meta span{text-align:center!important}
}
/* below 1040 the nav needs the room the date was taking */
@media(max-width:1039px){.mobx header .navleft .dm-date{display:none!important}}

/* tp-datefall */

/* the dateline is always near the top: in the header when there is room,
   in the masthead above the cadence when there is not. Never both, never neither. */
.dm-date-m{display:none!important}
@media(max-width:1039px){
 .mobx>.mast .dm-meta{flex-direction:column!important;align-items:center!important;gap:9px!important}
 .dm-date-m{display:block!important;text-align:center!important;
  font:700 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  letter-spacing:2.4px!important;text-transform:uppercase!important;color:#8b8781!important}
}

/* tp-datemob */

.dm-date-s{display:none!important}
@media(max-width:760px){
 .mobx>.mast .dm-date-s{display:block!important;order:-2!important;width:100%!important;
  text-align:center!important;margin:0 0 12px!important;
  font:700 9.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  letter-spacing:2.2px!important;text-transform:uppercase!important;color:#8b8781!important}
}

/* tp-fix9 */

/* Back to top was riding 7.25px above the wordmark's ink centre, so the eye line
   hit its underline instead of the type. Measured, not guessed. */
footer.tpfoot .tpf-row1 .tpf-top{top:3.25px!important}
@media(min-width:1040px){
 /* a black rule between the wordmark and the dateline */
 .mobx header .navleft .dm-date{margin-left:0!important;display:inline-flex!important;align-items:center!important}
 .mobx header .navleft .dm-date::before{content:""!important;display:block!important;
  width:1px!important;height:14px!important;background:#141416!important;
  margin:0 20px 0 20px!important;flex:0 0 auto!important;position:relative!important;top:-1px!important}
}

/* vp-cover-2026 */

/* Cover picture: whole image, no 3:2 crop, a touch smaller */
.mobx section.cover>.cover-img{max-width:620px!important;aspect-ratio:auto!important;
  height:auto!important;margin-left:auto!important;margin-right:0!important}
.mobx section.cover>.cover-img img{width:100%!important;height:auto!important;
  aspect-ratio:auto!important;object-fit:contain!important;display:block!important}
@media(max-width:960px){
  .mobx section.cover>.cover-img{max-width:100%!important;margin:0 auto!important}
}

/* vp-desktop-2026 */

/* desktop only: smaller Latest Stories cards (all five visible, 16:9 like every other picture) */
@media(min-width:961px){
  .mobx #slider{gap:18px!important}
  .mobx #slider .scard{flex:0 0 250px!important;width:250px!important;min-width:250px!important}
  .mobx #slider .scard img{aspect-ratio:16/9!important}
  .mobx #slider .scard h4{font-size:15.5px!important;line-height:1.2!important}
  .mobx #slider .scard p{font-size:12.5px!important}
}

/* vp-mobcards-2026 */

@media(max-width:960px){
  .mobx #slider .scard img{aspect-ratio:16/9!important;object-fit:cover!important}
}

/* vp-mastwords-2026 */

/* masthead type lifted off the photograph - photo, band, layout and text all unchanged */
@media(min-width:961px){
  
  .mobx>.mast .pub{color:#141416!important;
    text-shadow:0 0 10px rgba(255,255,255,.98), 0 0 20px rgba(255,255,255,.9), 0 1px 0 rgba(255,255,255,1)!important}
  .mobx>.mast .pub::before,.mobx>.mast .pub::after{
    opacity:.8!important;box-shadow:0 0 8px rgba(255,255,255,.95)!important}
}

/* tp-splash */

@media(min-width:761px){
/* ---------- opening screen: the photo does its work here, once ---------- */
.tpsplash{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:#0e0e10;   /* the photo comes from the .tpsplash,#tpsplash rule below - this
                           copy of it was 773 KB of base64 that was overridden and never painted */
  transition:opacity .72s cubic-bezier(.4,0,.2,1),visibility .72s}
.tpsplash::before{content:"";position:absolute;inset:0;
  background:radial-gradient(72% 52% at 50% 46%,rgba(244,243,241,.80) 0%,rgba(244,243,241,.62) 42%,rgba(244,243,241,.18) 78%,rgba(244,243,241,0) 100%)}
.tpsplash-in{position:relative;text-align:center;
  animation:tpsIn .9s cubic-bezier(.2,.9,.3,1) both}
.tpsplash-pub{font:700 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:3.4px;text-transform:uppercase;color:#3a3a42;margin-bottom:24px;
  text-shadow:0 0 10px rgba(255,255,255,.95),0 0 20px rgba(255,255,255,.85)}
.tpsplash-mark{display:block;width:min(620px,calc(46 * var(--vw, 1vw)));height:auto;margin:0 auto;
  filter:drop-shadow(0 0 16px rgba(255,255,255,.95)) drop-shadow(0 0 34px rgba(255,255,255,.8))}
.tpsplash-bar{width:190px;height:2px;margin:38px auto 0;background:rgba(20,20,22,.16);border-radius:2px;overflow:hidden}
.tpsplash-bar i{display:block;height:100%;width:0;background:#c4ab67;
  animation:tpsBar 1.35s cubic-bezier(.3,.1,.2,1) .18s both}
@keyframes tpsIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes tpsBar{to{width:100%}}
html.tps-lock,html.tps-lock body{overflow:hidden}
.tpsplash.tps-out{opacity:0;visibility:hidden}

/* ---------- the page it opens into: no photo, just the paper ---------- */
.mobx>.mast{background:#f4f3f1!important;background-image:none!important;
  min-height:0!important;padding:56px 46px 44px!important;
  border-bottom:3px solid #c4ab67!important}
.mobx>.mast .pub{color:#8b8781!important;text-shadow:none!important;
  font-size:11.5px!important;letter-spacing:3.2px!important}

.mobx>.mast .sched{margin-top:24px!important;background:rgba(20,20,22,.05)!important;
  color:#4a4a52!important;border:1px solid rgba(20,20,22,.10)!important;box-shadow:none!important}
/* the reveal: content rises as the screen lifts */
/* 2026-09-18: the fade is back, but at 0.22s instead of 0.9 and with no
   transform in the keyframes. The 0.9s wash was what made every tap read as
   a glitch; taking it out entirely made the page snap in at the moment the
   gate lifts, which reads as the page landing out of order. A short fade
   covers the hand-off without being a transition. The transform stays out:
   animating it makes .mobx a containing block and breaks the fixed menu. */
@keyframes tpFade{from{opacity:0}to{opacity:1}}
.mobx{animation:tpFade .22s linear both}

@media(prefers-reduced-motion:reduce){
 .tpsplash,.tpsplash-in,.tpsplash-bar i,.mobx{animation:none!important;transition:none!important}
}
}


/* tp-mast-c */
@media(min-width:761px){
.mobx>.mast{padding:44px 46px 34px!important}

.mobx>.mast .sched{margin-top:26px!important}
}
/* tp-schbr */
.schbr{display:none}@media(max-width:760px){.mobx>.mast .schbr{display:inline}}
/* tp-bottom */

/* ---------- More from The Position ---------- */
.tpmore{background:#f4f3f1;border-top:1px solid #c4ab67}
.tpmore-in{max-width:1348px;margin:0 auto;padding:44px 46px 52px}
.tpmore-hd{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 26px}
.tpmore-hd h2{margin:0;font:700 21px/1 "Iowan Old Style",Georgia,"Times New Roman",Times,serif;color:#141416}
.tpmore-hd a{font:700 10.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
 letter-spacing:2.4px;text-transform:uppercase;color:#876c22;text-decoration:none;
 border-bottom:1px solid rgba(196,171,103,.45);padding-bottom:3px}
.tpmore-hd a:hover{color:#141416;border-color:rgba(20,20,22,.4)}
.tpmore-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.tpmore-c{display:block;text-decoration:none;color:inherit}
.tpmore-c img{display:block;width:100%;height:196px;object-fit:cover;border-radius:2px;background:#e6e2db}
.tpmore-c .k{display:block;margin:14px 0 7px;font:700 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
 letter-spacing:2.2px;text-transform:uppercase;color:#876c22}
.tpmore-c h3{margin:0 0 8px;font:700 19px/1.24 "Iowan Old Style",Georgia,"Times New Roman",Times,serif;color:#141416}
.tpmore-c p{margin:0 0 10px;font:400 14.5px/1.5 "Iowan Old Style",Georgia,serif;color:#5a5750}
.tpmore-c .d{font:700 10px/1 -apple-system;letter-spacing:2px;text-transform:uppercase;color:#8b8781}
.tpmore-c:hover h3{color:#876c22}
/* ---------- Subscribe band ---------- */
.tpband{background:#141416}
.tpband-in{max-width:1348px;margin:0 auto;padding:52px 46px 56px;display:flex;align-items:center;
 justify-content:space-between;gap:44px}
.tpband-l{max-width:560px}
.tpband-l .k{display:block;margin:0 0 10px;font:700 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
 letter-spacing:2.6px;text-transform:uppercase;color:#876c22}
.tpband-l h2{margin:0 0 9px;font:700 30px/1.14 "Iowan Old Style",Georgia,"Times New Roman",Times,serif;color:#f4f3f1}
.tpband-l p{margin:0;font:400 15.5px/1.5 "Iowan Old Style",Georgia,serif;color:#a8a49d}
.tpband form{display:flex;gap:10px;flex:0 0 auto}
.tpband input{width:290px;padding:15px 16px;border:1px solid rgba(244,243,241,.28);background:transparent;
 color:#f4f3f1;font:400 15px/1 "Iowan Old Style",Georgia,serif;border-radius:2px}
.tpband input::placeholder{color:#87837c}
.tpband input:focus{outline:0;border-color:#c4ab67}
.tpband button{padding:15px 26px;border:0;background:#c4ab67;color:#fff;border-radius:2px;cursor:pointer;
 font:700 11px/1 -apple-system;letter-spacing:2.2px;text-transform:uppercase}
.tpband button:hover{background:#f4f3f1;color:#141416}
.tpband .done{display:none;font:400 16px/1.4 "Iowan Old Style",Georgia,serif;color:#f4f3f1}
.tpband.ok form{display:none}
.tpband.ok .done{display:block}
@media(max-width:760px){
 .tpmore-grid{grid-template-columns:1fr;gap:32px}
 .tpmore-c img{height:210px}
 .tpmore-in{padding:34px 22px 40px}
 .tpband-in{flex-direction:column;align-items:flex-start;gap:26px;padding:40px 22px 44px}
 .tpband form{width:100%}
 .tpband input{width:100%;flex:1 1 auto}
 .tpband-l h2{font-size:25px}
}

/* tp-bottom2 */

/* ---------- Browse by category ---------- */
.tpcat{background:#f4f3f1;border-top:1px solid rgba(20,20,22,.14)}
.tpcat-in{max-width:1348px;margin:0 auto;padding:44px 46px 50px}
.tpcat-hd{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 6px}
.tpcat-hd h2{margin:0;font:700 21px/1 "Iowan Old Style",Georgia,"Times New Roman",Times,serif;color:#141416}
.tpcat-hd span{font:italic 400 16px/1 "Iowan Old Style",Georgia,serif;color:#5a5750}
.tpcat-list{display:block;margin-top:20px;border-top:1px solid rgba(20,20,22,.14)}
.tpcat-r{display:flex;align-items:baseline;gap:22px;padding:17px 2px;text-decoration:none;color:inherit;
 border-bottom:1px solid rgba(20,20,22,.10);transition:padding-left .2s ease,color .18s ease}
.tpcat-r:hover{padding-left:14px;color:#876c22}
.tpcat-r .nm{flex:1 1 auto;font:700 30px/1.02 "Iowan Old Style",Georgia,"Times New Roman",Times,serif;letter-spacing:-.4px}
.tpcat-r .ct{flex:0 0 auto;font:700 10.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
 letter-spacing:2.2px;text-transform:uppercase;color:#8b8781}
.tpcat-r:hover .ct{color:#876c22}
/* ---------- Get Featured teaser ---------- */
.tpfeat{background:#f4f3f1;border-top:1px solid rgba(20,20,22,.14)}
.tpfeat-in{max-width:1348px;margin:0 auto;padding:38px 46px 42px;display:flex;align-items:center;
 justify-content:space-between;gap:36px}
.tpfeat-in p{margin:0;font:400 19px/1.42 "Iowan Old Style",Georgia,"Times New Roman",Times,serif;color:#141416;max-width:64ch}
.tpfeat-in p b{font-weight:700}
.tpfeat-in a{flex:0 0 auto;font:700 10.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
 letter-spacing:2.4px;text-transform:uppercase;color:#876c22;text-decoration:none;
 border-bottom:1px solid rgba(196,171,103,.45);padding-bottom:3px;white-space:nowrap}
.tpfeat-in a:hover{color:#141416;border-color:rgba(20,20,22,.4)}
@media(max-width:760px){
 .tpcat-in{padding:34px 22px 38px}
 .tpcat-r{padding:14px 0}
 .tpcat-r .nm{font-size:24px}
 .tpcat-r:hover{padding-left:0}
 .tpfeat-in{flex-direction:column;align-items:flex-start;gap:18px;padding:30px 22px 34px}
 .tpfeat-in p{font-size:17px}
}

/* tp-crisp */

/* ---------- one rhythm for every band below the feature ---------- */
.tpmore,.tpcat,.tpband,.tpfeat,.tpgames{border-top:1px solid #c4ab67!important}
.tpmore-in,.tpcat-in,.tpband-in,.tpfeat-in,.tpg-in{
 max-width:1348px!important;margin:0 auto!important;padding-left:0!important;padding-right:0!important}
.tpmore-in,.tpcat-in{padding-top:52px!important;padding-bottom:56px!important}
.tpg-in{padding-top:52px!important;padding-bottom:56px!important}
.tpfeat-in{padding-top:34px!important;padding-bottom:36px!important}
.tpband-in{padding-top:56px!important;padding-bottom:58px!important}
/* section headers: one treatment everywhere */
.tpmore-hd,.tpcat-hd,.tpg-hd{margin:0 0 26px!important;padding:0 0 15px!important;
 border-bottom:1px solid rgba(20,20,22,.14)!important;align-items:baseline!important}
.tpmore-hd h2,.tpcat-hd h2,.tpg-hd h2{font-size:19px!important;letter-spacing:-.1px!important}
.tpcat-hd span,.tpg-hd span{font-size:15px!important}
.tpmore-hd a{align-self:baseline!important}
/* the old slider goes: one story module on the page, not two */
.mobx section:has(#slider){display:none!important}
.mobx .shead,.mobx #slider,.mobx #dots{display:none!important}
/* category rail — one line, echoing the masthead */
.tpcat-rail{display:grid!important;grid-template-columns:repeat(6,1fr)!important;gap:0!important;
 border-top:1px solid rgba(20,20,22,.12)!important;border-bottom:1px solid rgba(20,20,22,.12)!important}
.tpcat-rail a{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:8px!important;
 padding:22px 20px 22px 0!important;text-decoration:none!important;color:inherit!important;
 border-right:1px solid rgba(20,20,22,.10)!important}
.tpcat-rail a+a{padding-left:20px!important}
.tpcat-rail a:last-child{border-right:0!important;padding-right:0!important}
.tpcat-rail b{font:700 21px/1 "Iowan Old Style",Georgia,"Times New Roman",Times,serif!important;color:#141416!important}
.tpcat-rail i{font:700 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
 font-style:normal!important;letter-spacing:2px!important;text-transform:uppercase!important;color:#8b8781!important}
.tpcat-rail a:hover b{color:#876c22!important}
/* 3-up breathes a little more */
.tpmore-grid{gap:34px!important}
.tpmore-c img{height:184px!important}
.tpmore-c h3{font-size:18.5px!important}
@media(max-width:760px){
 .tpmore-in,.tpcat-in,.tpband-in,.tpfeat-in,.tpg-in{padding-left:22px!important;padding-right:22px!important}
 .tpmore-in,.tpcat-in,.tpg-in{padding-top:36px!important;padding-bottom:40px!important}
 .tpcat-rail{grid-template-columns:1fr 1fr!important}
 .tpcat-rail a,.tpcat-rail a+a{border-right:0!important;border-bottom:1px solid rgba(20,20,22,.10)!important;
  padding:16px 0!important;padding-left:0!important;padding-right:0!important}
 .tpcat-rail a:nth-child(odd){border-right:1px solid rgba(20,20,22,.10)!important;padding-right:16px!important}
 .tpcat-rail a:nth-child(even){padding-left:16px!important}
 .tpcat-rail a:nth-last-child(-n+2){border-bottom:0!important}
 .tpmore-grid{gap:30px!important}
}

/* tp-games */

/* everything here is !important-armoured: the site's .mobx reset flattens new layout classes */
/* revert the site reset, but never inside an <svg> — all:revert zeroes SVG geometry */
.tpgames,.tpcards,#tpgwrap,
.tpgames :not(svg):not(svg *),.tpcards :not(svg):not(svg *),#tpgwrap :not(svg):not(svg *){all:revert}

/* ---------- shared header ---------- */
.tpg-hd{display:flex!important;align-items:baseline!important;gap:14px!important;margin:0 0 22px!important}
.tpg-hd h2{margin:0!important;font:700 21px/1 "Iowan Old Style",Georgia,"Times New Roman",Times,serif!important;color:#141416!important}
.tpg-hd span{font:italic 400 16px/1 "Iowan Old Style",Georgia,"Times New Roman",Times,serif!important;color:#5a5750!important}

/* ---------- HOME STRIP — no colour ---------- */
.tpgames{display:block!important;background:#f4f3f1!important;border-top:1px solid rgba(20,20,22,.14)!important}
.tpg-in{max-width:1348px!important;margin:0 auto!important;padding:34px 46px 42px!important}
.tpg-grid{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:0!important;
 border-top:1px solid rgba(20,20,22,.12)!important}
.tpg-item{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:16px!important;
 padding:20px 24px 20px 0!important;text-decoration:none!important;color:inherit!important;
 border-right:1px solid rgba(20,20,22,.12)!important;transition:opacity .18s ease!important}
.tpg-item+.tpg-item{padding-left:24px!important}
.tpg-item:last-child{border-right:0!important;padding-right:0!important}
.tpg-item:hover{opacity:.62!important}
.tpg-txt{display:block!important}
.tpg-n{display:block!important;margin:0 0 6px!important;font:700 17.5px/1.16 "Iowan Old Style",Georgia,"Times New Roman",Times,serif!important;color:#141416!important}
.tpg-d{display:block!important;font:400 13.8px/1.42 "Iowan Old Style",Georgia,serif!important;color:#5a5750!important;max-width:24ch!important}
.tpg-soon{display:inline-block!important;margin-top:9px!important;font:700 8.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
 letter-spacing:2px!important;text-transform:uppercase!important;color:#8b8781!important;
 border:1px solid rgba(20,20,22,.18)!important;border-radius:99px!important;padding:4px 8px!important}
.tpg-mark{display:block!important;flex:0 0 auto!important;width:44px!important;height:44px!important}
.tpg-mark svg{display:block!important;width:44px!important;height:44px!important}
.tpgames .f0{fill:#141416}.tpgames .f1{fill:#c4ab67}.tpgames .f2{fill:#e6e2db}.tpgames .f3{fill:rgba(20,20,22,.3)}
.tpgames .s0{stroke:#141416}.tpgames .s1{stroke:#c4ab67}
.tpg-item.soon .tpg-mark{opacity:.42!important}

/* ---------- PUZZLE PAGE CARDS — colour ---------- */
.tpcards{display:block!important;background:#f4f3f1!important;border-top:1px solid rgba(20,20,22,.14)!important}
.tpc-in{max-width:1348px!important;margin:0 auto!important;padding:34px 46px 56px!important}
.tpc-grid{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:18px!important}
.tpc{display:flex!important;flex-direction:column!important;background:#fff!important;
 border:1px solid rgba(20,20,22,.14)!important;border-radius:4px!important;overflow:hidden!important}
.tpc-art{display:flex!important;flex-direction:column!important;align-items:center!important;gap:15px!important;
 padding:32px 18px 24px!important}
.tpc-art svg{display:block!important;width:46px!important;height:46px!important}
.tpc-art h3{margin:0!important;font:700 21px/1 "Iowan Old Style",Georgia,"Times New Roman",Times,serif!important;color:#141416!important}
.tpc-b{display:flex!important;flex-direction:column!important;align-items:center!important;gap:11px!important;flex:1!important;
 padding:17px 18px 20px!important;border-top:1px solid rgba(20,20,22,.14)!important}
.tpc-b p{margin:0!important;text-align:center!important;font:400 13.8px/1.45 "Iowan Old Style",Georgia,serif!important;color:#5a5750!important}
.tpc-cad{font:700 9.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
 letter-spacing:2.2px!important;text-transform:uppercase!important;color:#8b8781!important}
.tpc-play{width:100%!important;padding:12px!important;border:1px solid rgba(20,20,22,.28)!important;border-radius:99px!important;
 background:none!important;cursor:pointer!important;font:700 12px/1 "Iowan Old Style",Georgia,serif!important;color:#141416!important}
.tpc-play:hover{background:#141416!important;color:#f4f3f1!important;border-color:#141416!important}
.tpc-soon{width:100%!important;padding:12px!important;text-align:center!important;border:1px dashed rgba(20,20,22,.22)!important;
 border-radius:99px!important;font:700 9.5px/1 -apple-system!important;letter-spacing:2px!important;text-transform:uppercase!important;color:#8b8781!important}
.tpc.t1 .tpc-art{background:#e7d9c3!important}
.tpc.t2 .tpc-art{background:#cbdac4!important}
.tpc.t3 .tpc-art{background:#ccd6e6!important}
.tpc.t4 .tpc-art{background:#dbcfe2!important}
.tpcards .f0{fill:#141416}.tpcards .f1{fill:#c4ab67}.tpcards .f2{fill:#fff}.tpcards .f3{fill:rgba(20,20,22,.35)}
.tpcards .s0{stroke:#141416}.tpcards .s1{stroke:#c4ab67}
.tpc.soon .tpc-art{opacity:.72!important}

@media(max-width:760px){
 .tpg-grid{grid-template-columns:1fr!important}
 .tpg-item,.tpg-item+.tpg-item{border-right:0!important;border-bottom:1px solid rgba(20,20,22,.12)!important;
  padding:18px 0!important;padding-left:0!important;padding-right:0!important}
 .tpg-item:last-child{border-bottom:0!important}
 .tpg-in{padding:28px 22px 34px!important}
 .tpg-d{max-width:none!important}
 .tpc-grid{grid-template-columns:1fr 1fr!important;gap:14px!important}
 .tpc-in{padding:28px 22px 40px!important}
}
@media(max-width:560px){.tpc-grid{grid-template-columns:1fr!important}}

/* ---------- The Grid, playing surface ---------- */
#tpgwrap{position:fixed!important;inset:0!important;z-index:10000!important;display:none;align-items:flex-start!important;
 justify-content:center!important;background:rgba(20,20,22,.55)!important;overflow:auto!important;padding:40px 16px!important}
#tpgwrap.on{display:flex!important}
.tpg-card{position:relative!important;width:100%!important;max-width:620px!important;background:#e6e3de!important;
 padding:30px 30px 34px!important;border:1px solid rgba(20,20,22,.16)!important}
.tpg-x{position:absolute!important;top:12px!important;right:14px!important;border:0!important;background:none!important;
 font:400 26px/1 -apple-system!important;color:#8b8781!important;cursor:pointer!important;padding:4px 8px!important}
.tpg-x:hover{color:#876c22!important}
.tpg-eyebrow{font:700 10.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
 letter-spacing:3px!important;text-transform:uppercase!important;color:#8b8781!important;margin:0 0 8px!important}
.tpg-card h3{margin:0 0 4px!important;font:700 30px/1.05 "Iowan Old Style",Georgia,"Times New Roman",Times,serif!important;color:#141416!important}
.tpg-card .tpg-sub{margin:0 0 20px!important;font:400 15px/1.4 "Iowan Old Style",Georgia,serif!important;color:#5a5750!important}
.tpg-solved{display:flex!important;flex-direction:column!important;gap:6px!important;margin-bottom:6px!important}
.tpg-sol{padding:12px 14px!important;text-align:center!important;border-radius:2px!important}
.tpg-sol b{display:block!important;font:700 11.5px/1 -apple-system!important;letter-spacing:2.4px!important;text-transform:uppercase!important;color:#141416!important}
.tpg-sol span{display:block!important;margin-top:5px!important;font:400 13.5px/1.3 "Iowan Old Style",Georgia,serif!important;color:#3a3833!important}
.tpg-sol.c0{background:#e7d9c3!important}.tpg-sol.c1{background:#cbdac4!important}
.tpg-sol.c2{background:#ccd6e6!important}.tpg-sol.c3{background:#dbcfe2!important}
.tpg-board{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:6px!important;margin-top:6px!important}
.tpg-t{display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;
 min-height:66px!important;padding:6px 4px!important;background:#e6e2db!important;border:0!important;border-radius:2px!important;
 cursor:pointer!important;color:#141416!important;
 font:700 11.5px/1.18 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
 letter-spacing:.4px!important;transition:background .14s ease,color .14s ease,transform .12s ease!important}
.tpg-t:hover{background:#dcd7cf!important}
.tpg-t.sel{background:#141416!important;color:#f4f3f1!important}
.tpg-t.shake{animation:tpgShake .34s!important}
@keyframes tpgShake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.tpg-lives{display:flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;
 margin:20px 0 16px!important;font:700 10.5px/1 -apple-system!important;letter-spacing:2.4px!important;
 text-transform:uppercase!important;color:#8b8781!important}
.tpg-lives i{display:block!important;width:11px!important;height:11px!important;border-radius:50%!important;background:#141416!important}
.tpg-lives i.out{background:#d5d0c8!important}
.tpg-btns{display:flex!important;gap:9px!important;justify-content:center!important}
.tpg-b{font:700 11px/1 -apple-system!important;letter-spacing:2.2px!important;text-transform:uppercase!important;
 padding:13px 22px!important;border:1px solid #141416!important;background:none!important;color:#141416!important;
 cursor:pointer!important;border-radius:2px!important}
.tpg-b:hover{background:#141416!important;color:#f4f3f1!important}
.tpg-b[disabled]{opacity:.32!important;cursor:default!important}
.tpg-b.pri{background:#141416!important;color:#f4f3f1!important}
.tpg-b.pri:hover{background:#c4ab67!important;border-color:#c4ab67!important}
.tpg-msg{text-align:center!important;margin:14px 0 0!important;min-height:18px!important;
 font:400 14px/1.3 "Iowan Old Style",Georgia,serif!important;color:#5a5750!important}
.tpg-msg.win{color:#141416!important;font-weight:700!important}
@media(max-width:560px){
 .tpg-card{padding:24px 18px 28px!important}
 .tpg-t{min-height:60px!important;font-size:10.5px!important}
 .tpg-card h3{font-size:25px!important}
}


/* tp-games2 */

/* shared shell for Five and The Sweep, matching The Grid */
.tpg-shell{position:fixed!important;inset:0!important;z-index:10000!important;display:none;
 align-items:flex-start!important;justify-content:center!important;background:rgba(20,20,22,.55)!important;
 overflow:auto!important;padding:40px 16px!important}
.tpg-shell.on{display:flex!important}
.tpg-shell,.tpg-shell *{box-sizing:border-box}
.tpg-card.tpg-wide{max-width:660px!important}

/* ---- Five ---- */
.tpf-board{display:flex!important;flex-direction:column!important;gap:6px!important;align-items:center!important;margin:4px 0 20px!important}
.tpf-brow{display:flex!important;gap:6px!important}
.tpf-brow.shake{animation:tpgShake .34s}
.tpf-t{width:56px!important;height:56px!important;display:flex!important;align-items:center!important;justify-content:center!important;
 border:1px solid rgba(20,20,22,.22)!important;border-radius:2px!important;background:transparent!important;
 font:700 22px/1 "Iowan Old Style",Georgia,'Times New Roman',serif!important;color:#141416!important;text-transform:uppercase!important}
.tpf-t.typing{border-color:#141416!important}
.tpf-t.hit{background:#141416!important;border-color:#141416!important;color:#f4f3f1!important}
.tpf-t.near{background:#e7d9c3!important;border-color:#d8c6a8!important;color:#141416!important}
.tpf-t.miss{background:#dcd7cf!important;border-color:#dcd7cf!important;color:#5a5750!important}
.tpf-keys{display:flex!important;flex-direction:column!important;gap:6px!important;align-items:center!important}
.tpf-row{display:flex!important;gap:5px!important}
.tpf-key{min-width:34px!important;height:44px!important;padding:0 8px!important;border:0!important;border-radius:2px!important;
 background:#e6e2db!important;color:#141416!important;cursor:pointer!important;
 font:700 12px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif!important;letter-spacing:.5px!important}
.tpf-key.wide{min-width:48px!important}
.tpf-key:hover{background:#dcd7cf!important}
.tpf-key.hit{background:#141416!important;color:#f4f3f1!important}
.tpf-key.near{background:#e7d9c3!important}
.tpf-key.miss{background:#cfcac1!important;color:#8b8781!important}

/* ---- The Sweep ---- */
.tps-grid{display:grid!important;gap:3px!important;margin:6px 0 18px!important}
.tps-c{aspect-ratio:1/1!important;display:flex!important;align-items:center!important;justify-content:center!important;
 border:0!important;border-radius:2px!important;background:#e6e2db!important;color:#141416!important;cursor:pointer!important;
 font:700 13px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif!important;padding:0!important}
.tps-c:hover{background:#dcd7cf!important}
.tps-c.sel{background:#141416!important;color:#f4f3f1!important}
.tps-c.got{background:#cbdac4!important;color:#141416!important}
.tps-list{display:flex!important;flex-wrap:wrap!important;gap:8px 14px!important;justify-content:center!important}
.tps-w{font:700 10.5px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif!important;
 letter-spacing:2px!important;text-transform:uppercase!important;color:#8b8781!important}
.tps-w.done{color:#141416!important;text-decoration:line-through!important}
@media(max-width:560px){
 .tpf-t{width:46px!important;height:46px!important;font-size:19px!important}
 .tpf-key{min-width:28px!important;padding:0 5px!important;height:42px!important}
 .tps-c{font-size:11px!important}
}

/* ---- replay control ---- */
.tpg-btns{display:flex!important;justify-content:center!important;margin-top:14px!important}
.tpg-allthree{font:400 14px/1.3 "Iowan Old Style",Georgia,serif!important;color:#5a5750!important}
/* ---- The Mini ---- */
.tpm-wrap{display:flex!important;gap:26px!important;align-items:flex-start!important;margin:6px 0 4px!important}
.tpm-grid{display:grid!important;grid-template-columns:repeat(5,58px)!important;grid-auto-rows:58px!important;
 gap:0!important;border:2px solid #141416!important;flex:0 0 auto!important}
.tpm-c{position:relative!important;border-right:1px solid rgba(20,20,22,.3)!important;border-bottom:1px solid rgba(20,20,22,.3)!important;
 background:#fff!important;cursor:pointer!important;display:flex!important;align-items:center!important;justify-content:center!important}
.tpm-grid .tpm-c:nth-child(5n){border-right:0!important}
.tpm-grid .tpm-c:nth-child(n+21){border-bottom:0!important}
.tpm-c.blk{background:#141416!important;cursor:default!important}
.tpm-c i{position:absolute!important;top:2px!important;left:4px!important;font:700 9px/1 -apple-system!important;
 font-style:normal!important;color:#8b8781!important}
.tpm-c b{font:700 24px/1 "Iowan Old Style",Georgia,serif!important;color:#141416!important}
.tpm-c.line{background:#e7ecf4!important}
.tpm-c.sel{background:#cbdac4!important}
.tpm-clues{display:flex!important;gap:24px!important;flex:1 1 auto!important;min-width:0!important}
.tpm-col{flex:1 1 0!important;min-width:0!important}
.tpm-col h4{margin:0 0 8px!important;font:700 10px/1 -apple-system!important;letter-spacing:2.4px!important;
 text-transform:uppercase!important;color:#8b8781!important}
.tpm-clues ol{margin:0!important;padding:0 0 0 20px!important}
.tpm-clues li{margin:0 0 7px!important;font:400 13px/1.35 "Iowan Old Style",Georgia,serif!important;
 color:#3a3833!important;cursor:pointer!important}
.tpm-clues li.on{color:#141416!important;font-weight:700!important}
.tpm-clues li:hover{color:#876c22!important}
@media(max-width:620px){
 .tpm-wrap{flex-direction:column!important;gap:18px!important;align-items:center!important}
 .tpm-grid{grid-template-columns:repeat(5,52px)!important;grid-auto-rows:52px!important}
 .tpm-clues{width:100%!important}
}
/* the sweep grid must never run past the card */
.tps-grid{grid-template-columns:repeat(var(--n,11),minmax(0,1fr))!important;max-width:100%!important}


/* tp-games3 */

/* ---------- shared: how-to block, HUD, tool row ---------- */
.tpb-how,.tps-how,.tpm-how{margin:0 0 16px!important;padding:13px 15px!important;background:#f6f5f2!important;
 border:1px solid rgba(20,20,22,.1)!important;border-radius:5px!important}
.tpb-how b,.tps-how b,.tpm-how b{display:block!important;margin:0 0 6px!important;
 font:700 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
 letter-spacing:2px!important;text-transform:uppercase!important;color:#8b8781!important}
.tpb-how ol,.tps-how ol,.tpm-how ol{margin:0!important;padding:0 0 0 18px!important}
.tpb-how li,.tps-how li,.tpm-how li{margin:0 0 3px!important;
 font:400 14px/1.5 "Iowan Old Style",Georgia,serif!important;color:#33312c!important}
.tpb-how li b,.tps-how li b,.tpm-how li b{display:inline!important;margin:0!important;font:inherit!important;
 font-weight:700!important;letter-spacing:0!important;text-transform:none!important;color:#141416!important}
.tpb-note,.tps-note,.tpm-note{display:block!important;margin-top:8px!important;
 font:italic 400 13px/1.45 "Iowan Old Style",Georgia,serif!important;color:#5a5750!important}

.tps-hud,.tpm-hud{display:flex!important;align-items:center!important;justify-content:center!important;
 gap:22px!important;margin:0 0 12px!important;
 font:700 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
 letter-spacing:1.6px!important;text-transform:uppercase!important;color:#8b8781!important}
.tps-hud b,.tpm-hud b{color:#141416!important;font-weight:700!important}
.tps-time,.tpm-time{font-variant-numeric:tabular-nums!important;color:#141416!important}

.tps-tools{display:flex!important;justify-content:center!important;gap:8px!important;margin:12px 0 10px!important}
.tps-tools .tpg-b{padding:8px 15px!important;font-size:12px!important}
.tps-tools .tpg-b.on{background:#141416!important;color:#f4f3f1!important;border-color:#141416!important}

/* ---------- Spelling Bee ---------- */
.tpb-rank{display:flex!important;align-items:center!important;gap:11px!important;margin:0 0 14px!important}
.tpb-name{flex:0 0 auto!important;min-width:96px!important;
 font:700 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
 letter-spacing:1.6px!important;text-transform:uppercase!important;color:#141416!important}
.tpb-bar{flex:1 1 auto!important;display:block!important;height:6px!important;border-radius:99px!important;
 background:rgba(20,20,22,.1)!important;overflow:hidden!important}
.tpb-bar i{display:block!important;height:100%!important;width:0!important;background:#c4ab67!important;
 border-radius:99px!important;transition:width .35s ease!important}
.tpb-pts{flex:0 0 auto!important;min-width:30px!important;text-align:right!important;
 font:700 17px/1 "Iowan Old Style",Georgia,serif!important;color:#141416!important;font-variant-numeric:tabular-nums!important}

.tpb-in{min-height:40px!important;margin:0 0 6px!important;text-align:center!important;
 font:700 27px/1.2 "Iowan Old Style",Georgia,serif!important;letter-spacing:2px!important;color:#141416!important}
.tpb-in .mid{color:#876c22!important}
.tpb-in .ph{font:400 14px/1.2 "Iowan Old Style",Georgia,serif!important;letter-spacing:0!important;color:#a5a19a!important}
.tpb-in.no{animation:tpbno .3s ease!important}
@keyframes tpbno{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

.tpb-comb{display:flex!important;justify-content:center!important;margin:0 0 4px!important}
.tpb-comb svg{display:block!important;width:230px!important;height:218px!important}
.tpb-cell polygon{fill:#e9e6e0!important;stroke:#fff!important;stroke-width:2!important;cursor:pointer!important}
.tpb-cell.mid polygon{fill:#c4ab67!important}
.tpb-cell text{text-anchor:middle!important;font:700 25px "Iowan Old Style",Georgia,serif!important;
 fill:#141416!important;pointer-events:none!important;user-select:none!important}
.tpb-cell.mid text{fill:#fff!important}
.tpb-cell:hover polygon{fill:#ddd9d1!important}
.tpb-cell.mid:hover polygon{fill:#b89947!important}
.tpb-cell.tap polygon{fill:#c9c4ba!important}
.tpb-ctrl{justify-content:center!important}

.tpb-found{margin:14px 0 0!important;padding:13px 15px!important;border:1px solid rgba(20,20,22,.12)!important;
 border-radius:5px!important;max-height:150px!important;overflow-y:auto!important}
.tpb-fhd{margin:0 0 8px!important;
 font:700 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
 letter-spacing:2px!important;text-transform:uppercase!important;color:#8b8781!important}
.tpb-fhd b{color:#141416!important}
.tpb-list{display:flex!important;flex-wrap:wrap!important;gap:6px!important}
.tpb-w{display:inline-block!important;padding:4px 9px!important;border-radius:99px!important;
 background:#f2f0ec!important;font:400 13px/1 "Iowan Old Style",Georgia,serif!important;color:#33312c!important}
.tpb-w.pan{background:#c4ab67!important;color:#fff!important;font-weight:700!important}
.tpb-empty{font:italic 400 13px/1 "Iowan Old Style",Georgia,serif!important;color:#a5a19a!important}
.tpb-card.pan{animation:tpbpan .7s ease!important}
@keyframes tpbpan{0%,100%{box-shadow:0 0 0 0 rgba(196,171,103,0)}35%{box-shadow:0 0 0 7px rgba(196,171,103,.28)}}

/* ---------- Sudoku extras ---------- */
.tpl-c.wrong{color:#d33!important}
.tpl-c.hint{background:#fff4d6!important}
.tpl-c.pencil{font:400 9px/1.15 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
 color:#8b8781!important}
.tpl-c u{text-decoration:none!important;display:block!important;letter-spacing:1px!important}

/* ---------- Memory Match ---------- */
.tpm-board{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:10px!important;margin:0 0 8px!important}
.tpm-board .tpm-c{position:relative!important;aspect-ratio:1.3/1!important;padding:0!important;border:0!important;
 background:none!important;cursor:pointer!important;perspective:700px!important}
.tpm-board .tpm-c .tpm-face, .tpm-board .tpm-c .tpm-back{position:absolute!important;inset:0!important;display:flex!important;
 align-items:center!important;justify-content:center!important;padding:7px!important;text-align:center!important;
 border-radius:7px!important;backface-visibility:hidden!important;
 transition:transform .38s cubic-bezier(.4,.05,.2,1)!important}
.tpm-board .tpm-c .tpm-back{background:#dcd8d1!important;border:1px solid #cdc8bf!important;transform:rotateY(0deg)!important}   /* was a warm tan #e7ddcd - the only puzzle not on the set's tone. One step down from the #e6e3de card, 2026-09-17 */
.tpm-board .tpm-c .tpm-back::before{content:""!important;display:block!important;width:19px!important;height:19px!important;
 border-radius:99px!important;border:2.5px solid #c4b294!important}
.tpm-board .tpm-c .tpm-face{background:#fff!important;border:1px solid rgba(20,20,22,.16)!important;
 transform:rotateY(180deg)!important;
 font:700 13.5px/1.28 "Iowan Old Style",Georgia,serif!important;color:#141416!important}
.tpm-board .tpm-c.up .tpm-back, .tpm-board .tpm-c.got .tpm-back{transform:rotateY(-180deg)!important}
.tpm-board .tpm-c.up .tpm-face, .tpm-board .tpm-c.got .tpm-face{transform:rotateY(0deg)!important}
.tpm-board .tpm-c.up .tpm-face{border-color:#141416!important;box-shadow:0 0 0 2px rgba(20,20,22,.1)!important}
.tpm-board .tpm-c.got{cursor:default!important}
.tpm-board .tpm-c.got .tpm-face{background:#fff2ee!important;border-color:#c4ab67!important;color:#876c22!important;
 animation:tpmpop .34s ease!important}
.tpm-board .tpm-c:not(.got):hover .tpm-back{background:#d2ccc3!important}
@keyframes tpmpop{0%{transform:rotateY(0) scale(1)}45%{transform:rotateY(0) scale(1.07)}100%{transform:rotateY(0) scale(1)}}

@media (max-width:600px){
 .tpm-board{grid-template-columns:repeat(3,1fr)!important}
 .tpb-comb svg{width:200px!important;height:190px!important}
 .tps-tools{flex-wrap:wrap!important}
}
/* sudoku: same-number highlight must not read as an error */
.tpl-c.same{background:#efece5!important}
.tpl-c.bad{color:#876c22!important;background:#fdece7!important}
.tpl-c.wrong{color:#876c22!important}
.tpl-c.hint{background:#f3efe2!important}

/* ---------- Letter Chain ---------- */
.tpc2-hud{display:flex!important;align-items:center!important;justify-content:center!important;gap:22px!important;
 margin:0 0 12px!important;font:700 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
 letter-spacing:1.6px!important;text-transform:uppercase!important;color:#8b8781!important}
.tpc2-hud b{color:#141416!important}
.tpc2-word{min-height:36px!important;margin:0 0 4px!important;text-align:center!important;
 font:700 24px/1.2 "Iowan Old Style",Georgia,serif!important;letter-spacing:2px!important;color:#141416!important}
.tpc2-word .lock{color:#876c22!important}
.tpc2-word .ph{font:400 13.5px/1.2 "Iowan Old Style",Georgia,serif!important;letter-spacing:0!important;color:#a5a19a!important}
.tpc2-box{display:flex!important;justify-content:center!important}
.tpc2-box svg{display:block!important;width:262px!important;height:262px!important}
.tpc2-sq{fill:none!important;stroke:rgba(20,20,22,.34)!important;stroke-width:2!important}
.tpc2-path{fill:none!important;stroke:#c4ab67!important;stroke-width:2.4!important;
 stroke-linecap:round!important;stroke-linejoin:round!important}
.tpc2-n circle{fill:#fff!important;stroke:rgba(20,20,22,.3)!important;stroke-width:1.4!important;cursor:pointer!important}
.tpc2-n text{text-anchor:middle!important;font:700 15px "Iowan Old Style",Georgia,serif!important;
 fill:#141416!important;pointer-events:none!important;user-select:none!important}
.tpc2-n.done circle{fill:#efece5!important}
.tpc2-n.on circle{fill:#c4ab67!important;stroke:#c4ab67!important}
.tpc2-n.on text{fill:#fff!important}
.tpc2-n:hover circle{stroke:#141416!important}
.tpc2-ctrl{justify-content:center!important}
.tpc2-list{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:6px!important;margin:12px 0 0!important}
.tpc2-w{display:inline-block!important;padding:4px 10px!important;border-radius:99px!important;background:#f2f0ec!important;
 font:400 13px/1 "Iowan Old Style",Georgia,serif!important;color:#33312c!important}
.tpc2-empty{font:italic 400 13px/1 "Iowan Old Style",Georgia,serif!important;color:#a5a19a!important}


/* tp-shell-css */

/* ---------- splash + tutorial shell ---------- */
.tpsh{position:fixed!important;inset:0!important;z-index:9999!important;display:none!important;
 align-items:center!important;justify-content:center!important;padding:24px!important;
 background:rgba(20,20,22,.42)!important}
.tpsh.on{display:flex!important}
.tpsh *{box-sizing:border-box!important}
.tpsh-pane{position:relative!important;width:100%!important;max-width:520px!important;max-height:calc(92 * var(--vh, 1vh))!important;
 overflow-y:auto!important;padding:44px 40px 34px!important;text-align:center!important;
 background:var(--tone,#eee)!important;border-radius:12px!important;
 box-shadow:0 18px 60px rgba(20,20,22,.24)!important}
.tpsh-pane[hidden]{display:none!important}
.tpsh-x{position:absolute!important;top:13px!important;right:15px!important;width:30px!important;height:30px!important;
 border:0!important;background:none!important;cursor:pointer!important;
 font:400 25px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;color:#141416!important;opacity:.5!important}
.tpsh-x:hover{opacity:1!important}

.tpsh-icon{display:flex!important;justify-content:center!important;margin:0 0 18px!important}
.tpsh-icon svg{display:block!important;width:78px!important;height:78px!important;overflow:visible!important}
.tpsh-icon svg *{vector-effect:non-scaling-stroke!important}
.tpsh-icon svg [class*="mk"],.tpsh-icon svg [class*="pth"]{stroke-width:4.4px!important}
.tpsh-icon .mk{fill:none;stroke:#141416;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.tpsh-icon .fo{fill:#c4ab67}.tpsh-icon .fk{fill:#141416}
.tpsh-icon .no{stroke:none}
.tpsh-icon .f0{fill:#141416}.tpsh-icon .f1{fill:#c4ab67}
.tpsh-icon .f2{fill:#fff}.tpsh-icon .f3{fill:rgba(20,20,22,.3)}
.tpsh-icon .s0{stroke:#141416}.tpsh-icon .s1{stroke:#c4ab67}
.tpsh-icon .pth2{fill:none;stroke:#c4ab67;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}

.tpsh-splash .tpsh-t{margin:0 0 10px!important;
 font:700 40px/1.04 "Iowan Old Style",Georgia,"Times New Roman",Times,serif!important;color:#141416!important}
.tpsh-tut .tpsh-t{margin:0 0 20px!important;
 font:700 27px/1.1 "Iowan Old Style",Georgia,serif!important;color:#141416!important}
.tpsh-d{margin:0 0 26px!important;
 font:400 19px/1.34 "Iowan Old Style",Georgia,serif!important;color:#33312c!important}

.tpsh-btns{display:flex!important;justify-content:center!important;gap:10px!important;margin:22px 0 0!important;
 flex-wrap:wrap!important}
.tpsh-b{padding:14px 30px!important;border-radius:99px!important;cursor:pointer!important;
 font:700 15px/1 "Iowan Old Style",Georgia,serif!important;transition:opacity .16s ease!important}
.tpsh-b.solid{background:#141416!important;color:#fff!important;border:1px solid #141416!important}
.tpsh-b.ghost{background:none!important;color:#141416!important;border:1px solid rgba(20,20,22,.34)!important}
.tpsh-b:hover{opacity:.78!important}

.tpsh-splash{padding-bottom:44px!important}

/* steps */
.tpsh-body{text-align:left!important}
.tpsh-step{display:flex!important;align-items:flex-start!important;gap:11px!important;margin:0 0 10px!important}
.tpsh-step i{flex:0 0 auto!important;width:21px!important;height:21px!important;border-radius:99px!important;
 background:#141416!important;color:#fff!important;font:700 11px/21px -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
 text-align:center!important;font-style:normal!important}
.tpsh-step span{font:400 15px/1.44 "Iowan Old Style",Georgia,serif!important;color:#26241f!important}
.tpsh-step b{font-weight:700!important;color:#141416!important}

/* demo area */
.tpsh-demo{margin:20px 0 0!important;padding:18px 16px 16px!important;background:rgba(255,255,255,.62)!important;
 border-radius:9px!important;text-align:center!important}
.tpsh-fb{margin:12px 0 0!important;min-height:19px!important;
 font:400 13.5px/1.4 "Iowan Old Style",Georgia,serif!important;color:#5a5750!important}
.tpsh-fb.ok{color:#2c6b45!important;font-weight:700!important}
.tpsh-fb.bad{color:#876c22!important}
.tpsh-demobtn{display:flex!important;justify-content:center!important;gap:8px!important;margin:12px 0 0!important}
.tpsh-demobtn .tpsh-b{padding:9px 20px!important;font-size:13px!important}

/* bee demo */
.tpsh-word{min-height:32px!important;margin:0 0 12px!important;
 font:700 23px/1.3 "Iowan Old Style",Georgia,serif!important;letter-spacing:2px!important;color:#141416!important}
.tpsh-word em{font-style:normal!important}
.tpsh-word em.mid{color:#876c22!important}
.tpsh-word .ph{font:400 13px/1.3 "Iowan Old Style",Georgia,serif!important;letter-spacing:0!important;color:#a5a19a!important}
.tpsh-hexes{display:flex!important;justify-content:center!important;gap:7px!important;flex-wrap:wrap!important}
.tpsh-hex{width:44px!important;height:44px!important;border:0!important;border-radius:8px!important;cursor:pointer!important;
 background:#e9e6e0!important;font:700 19px/1 "Iowan Old Style",Georgia,serif!important;color:#141416!important}
.tpsh-hex.mid{background:#c4ab67!important;color:#fff!important}
.tpsh-hex:hover{filter:brightness(.94)!important}

/* sudoku demo */
.tpsh-row{display:flex!important;justify-content:center!important;gap:0!important}
.tpsh-sq{width:36px!important;height:36px!important;border:1px solid rgba(20,20,22,.2)!important;margin:-0.5px!important;
 background:#fff!important;cursor:pointer!important;
 font:700 16px/1 "Iowan Old Style",Georgia,serif!important;color:#141416!important}
.tpsh-sq.fixed{background:#f4f2ee!important;cursor:default!important}
.tpsh-sq.sel{outline:2px solid #141416!important;outline-offset:-2px!important}
.tpsh-sq.ok{background:#e4f0e8!important;color:#2c6b45!important}
.tpsh-sq.bad{background:#fdece7!important;color:#876c22!important}
.tpsh-keys{display:flex!important;justify-content:center!important;gap:7px!important;margin:14px 0 0!important}
.tpsh-k{width:40px!important;height:40px!important;border:1px solid rgba(20,20,22,.24)!important;border-radius:7px!important;
 background:#fff!important;cursor:pointer!important;
 font:700 16px/1 "Iowan Old Style",Georgia,serif!important;color:#141416!important}
.tpsh-k:hover{background:#f1eee9!important}

/* memory demo */
.tpsh-cards{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:8px!important}
.tpsh-card{position:relative!important;aspect-ratio:1.25/1!important;border-radius:7px!important;cursor:pointer!important;
 border:1px solid #d8cbb6!important;background:#e7ddcd!important;overflow:hidden!important}
.tpsh-card span{display:none!important;font:700 12px/1.2 "Iowan Old Style",Georgia,serif!important;color:#141416!important}
.tpsh-card.up,.tpsh-card.got{background:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;
 padding:5px!important}
.tpsh-card.up span,.tpsh-card.got span{display:block!important}
.tpsh-card.up{border-color:#141416!important}
.tpsh-card.got{background:#fff2ee!important;border-color:#c4ab67!important}
.tpsh-card.got span{color:#876c22!important}

/* five demo */
.tpsh-tiles{display:flex!important;justify-content:center!important;gap:6px!important}
.tpsh-tile{width:42px!important;height:42px!important;display:flex!important;align-items:center!important;
 justify-content:center!important;border:2px solid rgba(20,20,22,.2)!important;border-radius:5px!important;
 font:700 19px/1 "Iowan Old Style",Georgia,serif!important;color:#141416!important;background:#fff!important}
.tpsh-tile.hit{background:#141416!important;border-color:#141416!important;color:#fff!important}
.tpsh-tile.near{background:#fff!important;border-color:#c4ab67!important;color:#876c22!important}
.tpsh-tile.no{background:#f1eee9!important;color:#a5a19a!important}

/* grid demo */
.tpsh-tilesg{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:6px!important}
.tpsh-tw{padding:11px 4px!important;border:1px solid rgba(20,20,22,.18)!important;border-radius:6px!important;
 background:#fff!important;cursor:pointer!important;
 font:700 11.5px/1.15 "Iowan Old Style",Georgia,serif!important;color:#141416!important}
.tpsh-tw.on{background:#141416!important;color:#fff!important;border-color:#141416!important}
.tpsh-tw.got{background:#c4ab67!important;border-color:#c4ab67!important;color:#fff!important}

/* sweep + mini demos */
.tpsh-grid5{display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:3px!important;
 max-width:210px!important;margin:12px auto 0!important}
.tpsh-gc{display:flex!important;align-items:center!important;justify-content:center!important;
 aspect-ratio:1!important;border-radius:5px!important;background:#fff!important;
 font:700 14px/1 "Iowan Old Style",Georgia,serif!important;color:#141416!important}
.tpsh-gc.lit{background:#c4ab67!important;color:#fff!important}
.tpsh-mini{display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:2px!important;
 max-width:190px!important;margin:0 auto!important}
.tpsh-mc{aspect-ratio:1!important;background:#fff!important;border:1px solid rgba(20,20,22,.2)!important}
.tpsh-mc.blk{background:#141416!important;border-color:#141416!important}

@media (max-width:560px){
 .tpsh-pane{padding:38px 22px 26px!important}
 .tpsh-splash .tpsh-t{font-size:32px!important}
 .tpsh-d{font-size:17px!important}
 .tpsh-tilesg{grid-template-columns:repeat(2,1fr)!important}
}

/* letter chain demo */
.tpsh-sides{position:relative!important;width:200px!important;height:200px!important;margin:6px auto 0!important;
 border:1px solid rgba(20,20,22,.22)!important;border-radius:6px!important}
.tpsh-side{position:absolute!important;display:flex!important;gap:10px!important}
.tpsh-side[data-s="0"]{top:-15px!important;left:0!important;right:0!important;justify-content:space-evenly!important}
.tpsh-side[data-s="2"]{bottom:-15px!important;left:0!important;right:0!important;justify-content:space-evenly!important}
.tpsh-side[data-s="1"]{right:-15px!important;top:0!important;bottom:0!important;flex-direction:column!important;justify-content:space-evenly!important}
.tpsh-side[data-s="3"]{left:-15px!important;top:0!important;bottom:0!important;flex-direction:column!important;justify-content:space-evenly!important}
.tpsh-dot{width:31px!important;height:31px!important;border-radius:99px!important;cursor:pointer!important;
 border:1px solid rgba(20,20,22,.28)!important;background:#fff!important;
 font:700 13px/1 "Iowan Old Style",Georgia,serif!important;color:#141416!important}
.tpsh-dot:hover{background:#f1eee9!important}

/* mini keyboard used in tutorials */
.tpsh-kb{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:6px!important;margin:14px 0 0!important}
.tpsh-key{width:34px!important;height:34px!important;border:1px solid rgba(20,20,22,.24)!important;border-radius:6px!important;
 background:#fff!important;cursor:pointer!important;
 font:700 14px/1 "Iowan Old Style",Georgia,serif!important;color:#141416!important}
.tpsh-key:hover{background:#f1eee9!important}
.tpsh-gc{border:0!important;cursor:pointer!important}
.tpsh-gc.pick{background:#141416!important;color:#fff!important}
.tpsh-mc{padding:0!important;cursor:pointer!important;
 font:700 15px/1 "Iowan Old Style",Georgia,serif!important;color:#141416!important;
 display:flex!important;align-items:center!important;justify-content:center!important}
.tpsh-mc.sel{outline:2px solid #c4ab67!important;outline-offset:-2px!important}
.tpsh-mc.good{color:#2c6b45!important}


/* marks: every one normalised to the same optical size at runtime (TPSHELL.normalise),
   with stroke weight held steady so a rescaled mark does not read heavier or lighter */
.tpg-item.tpg-item .tpg-art svg{overflow:visible!important}
.tpg-item.tpg-item .tpg-art svg *{vector-effect:non-scaling-stroke!important}
.tpg-item.tpg-item .tpg-art svg .mk,.tpg-item.tpg-item .tpg-art svg .pth2{stroke-width:6px!important}
.tpc .tpc-art svg{overflow:visible!important}
.tpc .tpc-art svg *{vector-effect:non-scaling-stroke!important}
.tpc .tpc-art svg .mk,.tpc .tpc-art svg .pth2{stroke-width:3.4px!important}

/* four to a row: the first card of every row must not carry the divider inset.
   specificity is deliberately high - a dozen older blocks set this at (0,4,0). */
.tpgames .tpg-grid .tpg-item.tpg-item.tpg-item.tpg-item:nth-child(4n+1){
 padding-left:0!important;border-left:0!important}


/* tp-featgrid */

/* The Feature grid declared two 1fr spacer tracks to centre the copy against
   the photograph, but the section heading auto-placed itself INTO the top
   spacer. Because both spacers are 1fr they size alike, so the heading's
   44.89px was mirrored as dead space under the copy — the reason this section
   framed differently from the other three. The heading now gets a row of its
   own above the spacers, so the last ink always lands on the content edge. */
.mobx section.cover{grid-template-rows:auto 1fr auto auto auto auto auto 1fr!important}
.mobx section.cover>.tpsec-hd{grid-column:1/-1!important;grid-row:1!important}
.mobx section.cover>.cover-img{grid-row:2/-1!important}
.mobx section.cover>.eyebrow{grid-row:3!important}
.mobx section.cover>h2{grid-row:4!important}
.mobx section.cover>.dek{grid-row:5!important}
.mobx section.cover>.byline{grid-row:6!important}
.mobx section.cover>a.readmore{grid-row:7!important}
@media(max-width:760px){
 .mobx section.cover{grid-template-rows:none!important;padding-top:38px!important;padding-bottom:40px!important}
 .mobx section.cover>.tpsec-hd,.mobx section.cover>.cover-img,.mobx section.cover>.eyebrow,
 .mobx section.cover>h2,.mobx section.cover>.dek,.mobx section.cover>.byline,
 .mobx section.cover>a.readmore{grid-row:auto!important}
}

/* tp-secrhythm */

/* Every section frames its content the same way: 46 above the first ink,
   50 below the last. Values are the box paddings that produce that after
   line-box leading is taken off — measured, not assumed. */
.mobx>section.cover{padding:46px 46px 49px!important}
@media(min-width:761px) and (max-width:1055px){.mobx>section.cover{padding-bottom:45px!important}}
@media(min-width:1180px) and (max-width:1339px){.mobx>section.cover{padding-bottom:45px!important}}
.tpmore-in{padding:46px 46px 43.61px!important}
.tpg-in{padding:46px 46px 13.75px!important}
.tpsay-in{padding:46px 46px 49.95px!important}
@media(max-width:760px){
 .mobx>section.cover{padding:39px 22px 32.6px!important}
 .tpmore-in{padding:38px 22px 33.6px!important}
 .tpg-in{padding:38px 22px 17.7px!important}
 .tpsay-in{padding:38px 22px 40px!important}
}
@media(min-width:700px) and (max-width:760px){
 .mobx>section.cover{padding-top:37px!important;padding-bottom:34.5px!important}
}

/* tp-footbase */

/* Rebuilt: the footer's layout sheet was lost in an edit. These are the
   declarations the measured footer was built on - chain typography, the two
   rows, the wordmark, the icon pair. tp-footfix and tp-footmid still sit
   after this and do the fine positioning. */
footer.tpfoot{background:#191712!important;border-top:1px solid #191712!important}
footer.tpfoot .tpf-in{box-sizing:border-box!important;width:100%!important;max-width:1440px!important;
 margin-left:auto!important;margin-right:auto!important;display:block!important}
footer.tpfoot .tpf-row1{display:flex!important;align-items:center!important;justify-content:space-between!important;
 gap:36px!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;
 position:relative!important}
footer.tpfoot .tpf-row2{display:flex!important;align-items:center!important;justify-content:space-between!important;
 gap:36px!important;width:100%!important;max-width:none!important;margin:30px 0 0!important;padding:0!important}
footer.tpfoot .tpf-mark{display:inline!important;vertical-align:baseline!important;text-decoration:none!important;
 font:400 21px/1 "Iowan Old Style",Georgia,"Times New Roman",Times,serif!important;
 color:#f4f3f1!important;letter-spacing:.1px!important}
footer.tpfoot .tpf-mark:hover{color:#876c22!important}
footer.tpfoot .tpf-mid{display:flex!important;align-items:baseline!important;flex:1 1 auto!important;
 justify-content:center!important;gap:0!important}
footer.tpfoot .tpf-mid a{font:700 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
 letter-spacing:2.4px!important;text-transform:uppercase!important;color:#c8c4bd!important;
 text-decoration:none!important;padding:0 18px!important;
 border-right:1px solid rgba(244,243,241,.16)!important}
footer.tpfoot .tpf-mid a:last-child{border-right:0!important}
footer.tpfoot .tpf-mid a:hover{color:#876c22!important}
footer.tpfoot .tpf-top{display:inline-block!important;flex:0 0 auto!important;margin:0!important;
 font:700 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
 letter-spacing:2.4px!important;text-transform:uppercase!important;color:#c8c4bd!important;
 text-decoration:none!important;background:none!important;border:0!important;border-radius:0!important;
 padding:0 0 4.5px!important;border-bottom:1px solid rgba(244,243,241,.34)!important}
footer.tpfoot .tpf-top:hover{color:#876c22!important;border-bottom-color:#c4ab67!important}
footer.tpfoot .tpf-pub{flex:0 0 auto!important;display:inline-block!important;
 font:700 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
 letter-spacing:2.4px!important;text-transform:uppercase!important;color:#87837c!important;
 text-decoration:none!important}
footer.tpfoot .tpf-pub::after{content:none!important}
footer.tpfoot .tpf-pub:hover{color:#876c22!important}
footer.tpfoot .tpf-soc{display:flex!important;align-items:center!important;gap:0!important;flex:0 0 auto!important;margin:0!important}
footer.tpfoot .tpf-ico{display:flex!important;align-items:center!important;justify-content:center!important;
 width:19px!important;height:19px!important;color:#c8c4bd!important}
footer.tpfoot .tpf-ico:hover{color:#876c22!important}
footer.tpfoot .tpf-ico svg{display:block!important;width:19px!important;height:19px!important}
footer.tpfoot .tpf-sep{display:block!important;width:1px!important;height:15px!important;
 background:rgba(244,243,241,.22)!important;margin:0 16px!important;flex:0 0 auto!important}
@media(max-width:760px){
 footer.tpfoot .tpf-row1{flex-direction:column!important;align-items:flex-start!important;gap:18px!important}
 footer.tpfoot .tpf-row2{margin-top:24px!important}
 footer.tpfoot .tpf-mid{justify-content:flex-start!important;flex-wrap:wrap!important}
 footer.tpfoot .tpf-mid a{padding:0 14px 0 0!important;border-right:0!important;margin:0 0 9px!important}
}

/* tp-footfix */

/* One optical line: The Position, the link chain and Back to top all ride the
   same ink centre. The chain stays absolutely centred on the page axis so it
   is centred on the page, not on the space left between the two side items. */
footer.tpfoot .tpf-in{padding:34px 46px 33px!important}
footer.tpfoot .tpf-row1 .tpf-mid{position:absolute!important;left:50%!important;
 transform:translateX(-50%)!important;top:30.63px!important;margin:0!important;
 flex:0 0 auto!important;white-space:nowrap!important;align-items:center!important}
footer.tpfoot .tpf-row1 .tpf-top{top:2.75px!important}
footer.tpfoot .tpf-row2 .tpf-pub{margin:0!important;display:inline-block!important;align-self:center!important}

@media(max-width:760px){
 footer.tpfoot .tpf-in{padding:30px 22px 30px!important}
 footer.tpfoot .tpf-row1 .tpf-mid{position:static!important;transform:none!important;
  top:auto!important;justify-content:flex-start!important;flex-wrap:wrap!important;
  white-space:normal!important;flex:1 1 auto!important}
 footer.tpfoot .tpf-row1 .tpf-top{top:0!important}
}

/* tp-footmid */

/* The icon row spans exactly the width of BACK TO TOP above it, so the divider
   lands on that text's centre and the X still ends on the 46px margin.
   Width is set at runtime (tp-footmid-js) because the text width depends on
   which sans the visitor actually has. */
footer.tpfoot .tpf-soc{justify-content:space-between!important}
footer.tpfoot .tpf-soc .tpf-sep{margin:0!important}
@media(max-width:760px){
 footer.tpfoot .tpf-soc{width:auto!important;justify-content:flex-start!important}
 footer.tpfoot .tpf-soc .tpf-sep{margin:0 16px!important}
}

/* tp-fill */

/* The two closing bands were thin against the 513 band height. They now carry
   their own weight: the puzzle marks read at size, and What We Cover states
   the beats instead of one sentence and a form. Nothing here changes a band. */
@media(min-width:761px){
 /* ---- Word Puzzles ---- */
 .tpg-grid,.tpg-in>.tpg-grid{align-items:stretch!important}
 .tpg-item.tpg-item{padding:40px 30px 40px 0!important;display:flex!important;
  flex-direction:column!important;justify-content:flex-start!important;gap:0!important}
 .tpg-item.tpg-item+.tpg-item.tpg-item{padding-left:30px!important}
 .tpg-item.tpg-item .tpg-n{font-size:22px!important;line-height:1.15!important;margin:0 0 9px!important}
 .tpg-item.tpg-item .tpg-d{margin:0!important;max-width:15em!important}
 .tpg-item.tpg-item svg{width:54px!important;height:54px!important;margin-top:auto!important}
 .tpg-item.tpg-item .tpg-mark,.tpg-item.tpg-item figure{margin-top:auto!important}

 /* ---- What We Cover ---- */
 .tpsay-in{display:block!important}
 .tpsay-body.tpsay-body{display:grid!important;
  grid-template-columns:minmax(300px,1fr) minmax(0,1.35fr)!important;
  column-gap:70px!important;row-gap:34px!important;align-items:start!important}
 .tpsay-body.tpsay-body>p{grid-column:1!important;grid-row:1!important;margin:0!important;
  font:400 20px/1.5 var(--tp-serif)!important;color:#191712!important;max-width:19em!important}
 .tpsay-beats{grid-column:2!important;grid-row:1/3!important;
  list-style:none!important;margin:0!important;padding:0!important;
  display:grid!important;grid-template-columns:1fr 1fr!important;
  column-gap:44px!important;row-gap:20px!important}
 .tpsay-beats li{display:block!important;margin:0!important;padding:0 0 15px 0!important;
  border-bottom:1px solid rgba(25,23,18,.13)!important}
 .tpsay-beats .k{display:block!important;
  font:700 10px/1 var(--tp-sans)!important;letter-spacing:2.4px!important;
  text-transform:uppercase!important;color:#191712!important;margin:0 0 7px!important}
 .tpsay-beats .v{display:block!important;font:400 14px/1.5 var(--tp-serif)!important;color:#4a4740!important}
 .tpsay-f{grid-column:1!important;grid-row:2!important;margin:0!important;align-self:end!important}
 .tpsay-done{grid-column:1!important;grid-row:3!important}
}
@media(max-width:760px){
 .tpsay-beats{list-style:none!important;margin:22px 0 0!important;padding:0!important;
  display:grid!important;grid-template-columns:1fr!important;row-gap:14px!important}
 .tpsay-beats li{padding:0 0 12px!important;border-bottom:1px solid rgba(25,23,18,.13)!important}
 .tpsay-beats .k{display:block!important;font:700 10px/1 var(--tp-sans)!important;
  letter-spacing:2.4px!important;text-transform:uppercase!important;color:#191712!important;margin:0 0 6px!important}
 .tpsay-beats .v{display:block!important;font:400 14px/1.5 var(--tp-serif)!important;color:#4a4740!important}
}

/* tp-puz */

@media(min-width:761px){
 /* the mark belongs beside the name, not under the sentence */
 .tpg-item.tpg-item{display:grid!important;
  grid-template-columns:1fr auto!important;grid-template-rows:auto auto!important;
  column-gap:18px!important;align-items:center!important;
  padding:32px 26px 32px 0!important}
 .tpg-item.tpg-item+.tpg-item.tpg-item{padding-left:26px!important}
 .tpg-item.tpg-item .tpg-n{grid-column:1!important;grid-row:1!important;
  font-size:18.5px!important;margin:0 0 6px!important;align-self:end!important}
 .tpg-item.tpg-item .tpg-d{grid-column:1!important;grid-row:2!important;
  margin:0!important;align-self:start!important;max-width:15em!important}
 .tpg-item.tpg-item svg,.tpg-item.tpg-item .tpg-mark{
  grid-column:2!important;grid-row:1/3!important;
  width:40px!important;height:40px!important;align-self:center!important;margin:0!important}
}

/* tp-white */

/* one ground, top to bottom - no grey band behind the nameplate */
:root{--paper:#ffffff;--paper-2:#ffffff}
html,body,.mobx,.mobx>.mast,.mobx>section,.mobx section,.cover,
.tpmore,.tpgames,.tpsay,.mobx header{
 background:#ffffff!important;background-image:none!important}
.mobx>.mast{background:#ffffff!important;background-image:none!important}
div.mobx>header,div.mobx>header .nav,div.mobx header,body>div.mobx{background:#ffffff!important;background-image:none!important}

/* tp-norule */

/* the hairline that ran off each section title is gone */
.mobx section.cover>.tpsec-hd::after,.tpg-hd.tpg-hd::after,.tpsay .tpsec-hd::after,
.tpmore-hd.tpmore-hd::before{display:none!important;content:none!important}
@media(min-width:761px){
 .tpmore-hd.tpmore-hd{justify-content:space-between!important}
}

/* tp-splashwhite */

/* the opening keeps its photograph - only the veil over it follows the new
   white ground, so the wordmark lands on the same colour the page starts in */
.tpsplash::before{background:linear-gradient(to bottom,
 rgba(255,255,255,.99) 0%,rgba(255,255,255,.985) 22%,rgba(255,255,255,.93) 28%,
 rgba(255,255,255,.62) 36%,rgba(255,255,255,.24) 46%,rgba(255,255,255,0) 60%)!important}
.tpsplash::after{background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,
 rgba(255,255,255,.35) 55%,rgba(255,255,255,.82) 100%)!important}
@media(max-width:760px){
 .tpsplash::before{background:linear-gradient(to bottom,
  rgba(255,255,255,.99) 0%,rgba(255,255,255,.985) 26%,rgba(255,255,255,.9) 33%,
  rgba(255,255,255,.5) 43%,rgba(255,255,255,0) 60%)!important}
}

/* tp-open */

/* The opening frame. The photograph is pre-cropped and resampled to 2880x1800
   - exactly retina size for a 1440x900 stage - so the browser never has to
   enlarge it. Scaling the 3000px original to this crop meant a 1.49x upscale
   in the browser, which is where the softness came from. */
.tpsplash,#tpsplash{
 background-image:url('tp_splash.jpg')!important;
 background-position:50% 50%!important;
 background-size:cover!important;
 background-repeat:no-repeat!important;
 image-rendering:auto!important}

/* tp-bands */

/* Every band is one height. The block sits centred in its band so the spare
   room is shared above and below rather than dumped under the content, and
   every left edge still starts on the 46px anchor. */
@media(min-width:761px){
 .mobx>section.cover,.tpmore,.tpgames,.tpsay{min-height:535px!important}
 .tpmore,.tpgames,.tpsay{display:flex!important;flex-direction:column!important;
  justify-content:center!important;align-items:stretch!important}
 .tpmore-in,.tpg-in,.tpsay-in{flex:0 0 auto!important;width:100%!important;
  margin-left:auto!important;margin-right:auto!important}
 .mobx>section.cover{align-content:center!important}
}

/* tpq-puzzles */

/* The band is taller now, so the puzzle cards become panels rather than a row
   of labels: mark first at size, name, one line of description, and a play
   affordance on the floor of each card. */
@media(min-width:761px){
 .tpgames{min-height:534px!important;box-sizing:content-box!important}
 .tpg-in{padding:46px 46px 46px!important;display:flex!important;flex-direction:column!important;flex:1 1 auto!important}
 .tpg-grid,.tpg-in>.tpg-grid{flex:1 1 auto!important}
 .tpg-grid,.tpg-in>.tpg-grid{display:grid!important;grid-template-columns:repeat(4,1fr)!important;
  gap:0!important;align-items:stretch!important;border-top:1px solid rgba(25,23,18,.14)!important;
  margin-top:22px!important}
 .tpg-item.tpg-item{display:flex!important;flex-direction:column!important;align-items:flex-start!important;
  padding:30px 28px 26px 0!important;text-decoration:none!important;position:relative!important;
  transition:background-color .38s ease!important}
 .tpg-item.tpg-item+.tpg-item.tpg-item{padding-left:28px!important;
  border-left:1px solid rgba(25,23,18,.14)!important}
 .tpg-item.tpg-item:hover{background:rgba(25,23,18,.028)!important}
 .tpg-item.tpg-item .tpg-mark{order:-1!important;display:block!important;margin:0 0 20px!important}
 .tpg-item.tpg-item .tpg-mark svg{width:64px!important;height:64px!important;display:block!important;
  transition:transform .5s cubic-bezier(.2,.6,.2,1)!important}
 .tpg-item.tpg-item:hover .tpg-mark svg{transform:translateY(-3px)!important}
 .tpg-item.tpg-item .tpg-txt{display:block!important}
 .tpg-item.tpg-item .tpg-n{display:block!important;font:700 20px/1.15 var(--tp-serif)!important;
  letter-spacing:-.2px!important;margin:0 0 8px!important;color:#191712!important}
 .tpg-item.tpg-item .tpg-d{display:block!important;font:400 14.5px/1.5 var(--tp-serif)!important;
  color:#4a4740!important;max-width:16em!important;margin:0!important}
 /* play line sits on the floor of every card, so the row has a base */
 .tpg-item.tpg-item::after{content:"Play"!important;display:block!important;margin-top:auto!important;
  padding-top:20px!important;
  font:700 10px/1 var(--tp-sans)!important;letter-spacing:2.4px!important;text-transform:uppercase!important;
  color:#87837c!important;transition:color .28s ease!important}
 .tpg-item.tpg-item:hover::after{color:#876c22!important}
}

/* tp-fix2 */

@media(min-width:761px){
 /* the play line is the last thing in the card, under the board */
 .tpg-item.tpg-item::after{order:2!important}
 .tpg-art{width:100%!important;align-self:stretch!important}
 .tpg-art svg{max-width:none!important;width:min(100%,190px)!important}
 /* the brief keeps its left anchor when its container turned into a column */
 .tpsay-in{align-items:stretch!important}
 .tpsay-body.tpsay-body{width:100%!important}
}

/* tp-fix3 */

@media(min-width:761px){
 /* the board has to beat the 38px icon rule that also matches .tpg-item svg */
 .tpg-item.tpg-item .tpg-art{width:100%!important;align-self:stretch!important;
  display:flex!important;align-items:center!important;justify-content:flex-start!important;
  flex:1 1 auto!important;margin:24px 0 0!important;min-height:0!important;order:1!important}
 .tpg-item.tpg-item .tpg-art svg{width:min(100%,176px)!important;height:auto!important;
  max-width:none!important;max-height:176px!important;display:block!important}
 .tpg-item.tpg-item::after{order:2!important}
 /* the brief: title, then the block directly under it */
 .tpsay-in{display:block!important}
 .tpsay-body.tpsay-body{align-content:start!important;margin-top:26px!important;row-gap:26px!important}
}

/* tp-fix4 */

@media(min-width:761px){
 .mobx>section.cover{padding-top:47px!important}
 .tpg-in{padding-bottom:34px!important}
 .tpgames{min-height:522px!important}
}

/* tp-sym */

/* ------------------------------------------------------------------
   One rule for every band: the first line sits 47 below the top rule and
   the last line sits 47 above the bottom rule. Bands are 535 tall, so the
   content box is a fixed 441 and the block distributes inside it.
   ------------------------------------------------------------------ */
@media(min-width:761px){
 .mobx>section.cover,.tpmore,.tpgames,.tpsay{
  box-sizing:border-box!important;height:535px!important;min-height:535px!important}
 .tpmore,.tpgames,.tpsay{display:block!important}
 .tpmore-in,.tpg-in,.tpsay-in{
  box-sizing:border-box!important;height:100%!important;
  padding-top:47px!important;padding-bottom:47px!important;
  display:flex!important;flex-direction:column!important;
  justify-content:space-between!important;align-items:stretch!important}
 .mobx>section.cover{padding-top:47px!important;padding-bottom:47px!important;
  align-content:space-between!important}
 /* every section title is one size */
 .mobx section.cover div.tpsec-hd h2,
 .mobx div.tpmore-hd h2,
 .mobx div.tpg-hd h2,
 .mobx section.tpsay div.tpsec-hd h2,
 div.tpmore-hd h2, div.tpg-hd h2, section.tpsay div.tpsec-hd h2,
 section.cover div.tpsec-hd h2{
  font:700 24px/1.1 var(--tp-serif)!important;letter-spacing:-.4px!important;color:#191712!important}
 /* the lead sits above the section titles but no longer shouts over them */
 .mobx section.cover h2:not(.tpsec-hd h2){
  font:700 30px/1.14 var(--tp-serif)!important;letter-spacing:-.5px!important}
}

/* tp-sym2 */

@media(min-width:761px){
 /* the photograph runs the full height of the copy block, so both columns
    start and finish on the same lines */
 .mobx section.cover>.cover-img{align-self:stretch!important;height:100%!important;
  max-height:none!important;aspect-ratio:auto!important;overflow:hidden!important}
 .mobx section.cover>.cover-img img{width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:50% 50%!important;display:block!important}
 /* the play line is the card's last line and sits on the content edge */
 .tpg-item.tpg-item{padding-bottom:0!important}
 .tpg-item.tpg-item::after{padding-top:20px!important}
 /* trim for the line-box slack under each section's last line */
 .tpmore-in{padding-bottom:40.6px!important}
}

/* tp-brief */

@media(min-width:761px){
 /* the brief block starts under its title and fills to the band floor,
    instead of one large void between the two */
 .tpsay-in{justify-content:flex-start!important}
 .tpsay-body.tpsay-body{flex:1 1 auto!important;margin-top:30px!important;
  align-content:space-between!important;row-gap:0!important}
 .tpsay-beats{align-content:space-between!important;height:100%!important;row-gap:0!important}
 .tpsay-beats li{padding-bottom:13px!important}
 .tpsay-body.tpsay-body>p{align-self:start!important}
 .tpsay-f{align-self:end!important}
}

/* tp-brief2 */

@media(min-width:761px){
 .tpsay .tpsay-in .tpsay-body{margin:30px 0 0!important;padding:0!important}
}

/* tp-gap0 */

@media(min-width:761px){
 .tpsay-in,.tpmore-in,.tpg-in{gap:0!important;row-gap:0!important}
 .tpsay .tpsay-in .tpsec-hd{margin-bottom:0!important}
 .tpsay .tpsay-in .tpsay-body{margin-top:30px!important}
}

/* tp-note */

/* The brief's left column had a hole between the statement and the form.
   This is what a reader actually needs to know before subscribing, set in
   the same register as the beats on the right. */
.tpsay-note{display:block!important;margin:0!important;padding:0!important}
.tpsay-note .k{display:block!important;font:700 10px/1 var(--tp-sans)!important;
 letter-spacing:2.4px!important;text-transform:uppercase!important;color:#876c22!important;
 margin:0 0 14px!important}
.tpsay-note ul{list-style:none!important;margin:0!important;padding:0!important;display:block!important}
.tpsay-note li{display:block!important;position:relative!important;
 padding:0 0 11px 20px!important;margin:0 0 11px!important;
 font:400 14.5px/1.5 var(--tp-serif)!important;color:#191712!important;
 border-bottom:1px solid rgba(25,23,18,.13)!important}
.tpsay-note li:last-of-type{margin-bottom:0!important}
.tpsay-note li::before{content:""!important;position:absolute!important;left:0!important;top:.62em!important;
 width:7px!important;height:7px!important;background:#c4ab67!important;
 transform:rotate(45deg)!important;display:block!important}
.tpsay-note .tpsay-alt{display:inline-block!important;margin:20px 0 0!important;
 font:700 10px/1 var(--tp-sans)!important;letter-spacing:2.4px!important;text-transform:uppercase!important;
 color:#191712!important;text-decoration:none!important;
 border-bottom:1px solid rgba(25,23,18,.3)!important;padding-bottom:4px!important;
 transition:color .28s ease,border-color .28s ease!important}
.tpsay-note .tpsay-alt:hover{color:#876c22!important;border-bottom-color:#c4ab67!important}
@media(min-width:761px){
 .tpsay-body.tpsay-body{grid-template-rows:auto auto auto!important}
 .tpsay-body.tpsay-body>p{grid-column:1!important;grid-row:1!important}
 .tpsay-note{grid-column:1!important;grid-row:2!important;align-self:start!important;margin-top:30px!important}
 .tpsay-beats{grid-column:2!important;grid-row:1/4!important}
 .tpsay-f{grid-column:1!important;grid-row:3!important;align-self:end!important}
 .tpsay-done{grid-column:1!important;grid-row:3!important}
}

/* tp-note2 */

@media(min-width:761px){
 .tpsay-note .tpsay-alt{margin:22px 0 66.1px!important}
 .tpsay-body.tpsay-body{align-content:start!important}
}

/* tp-note3 */

@media(min-width:761px){
 .tpsay-note ul{max-width:340px!important}
 .tpsay-note li{padding-bottom:10px!important;margin-bottom:10px!important}
}

/* tp-note4 */

@media(min-width:761px){
 /* the format block sits midway between the statement and the sign-up */
 .tpsay-body.tpsay-body{align-content:space-between!important}
 .tpsay-note{align-self:center!important;margin:0!important}
 .tpsay-note li:last-of-type{border-bottom:1px solid rgba(25,23,18,.13)!important;
  margin-bottom:0!important}
}

/* tp-footsub */

/* A second way to subscribe, sitting under the link chain on the page axis
   so it lines up with the chain above it rather than with either side item. */
footer.tpfoot .tpf-sub{display:flex!important;align-items:stretch!important;gap:0!important;
 position:absolute!important;left:50%!important;transform:translateX(-50%)!important;
 top:62px!important;margin:0!important;padding:0!important;width:390px!important;z-index:2!important}
footer.tpfoot .tpf-sub input[type=email]{flex:1 1 auto!important;min-width:0!important;
 background:transparent!important;border:1px solid rgba(244,243,241,.26)!important;border-right:0!important;
 border-radius:0!important;padding:0 14px!important;height:38px!important;
 font:400 13.5px/1 "Iowan Old Style",Georgia,serif!important;color:#f4f3f1!important;outline:none!important;
 transition:border-color .28s ease!important}
footer.tpfoot .tpf-sub input[type=email]::placeholder{color:#87837c!important}
footer.tpfoot .tpf-sub input[type=email]:focus{border-color:#f4f3f1!important}
footer.tpfoot .tpf-sub button{flex:0 0 auto!important;height:38px!important;padding:0 20px!important;
 background:#f4f3f1!important;color:#191712!important;border:1px solid #f4f3f1!important;border-radius:0!important;
 font:700 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
 letter-spacing:2.4px!important;text-transform:uppercase!important;cursor:pointer!important;
 transition:background-color .28s ease,color .28s ease,border-color .28s ease!important}
footer.tpfoot .tpf-sub button:hover{background:#c4ab67!important;border-color:#c4ab67!important;color:#fff!important}
@media(max-width:760px){
 footer.tpfoot .tpf-sub{position:static!important;transform:none!important;width:100%!important;
  max-width:360px!important;margin:20px 0 0!important}
}

/* tp-footsub2 */

@media(min-width:761px){
 footer.tpfoot .tpf-sub{top:100px!important}
 footer.tpfoot .tpf-row2{margin-top:106px!important}
}

/* tpq-footrhythm */

@media(min-width:761px){
 footer.tpfoot .tpf-in{padding:34px 46px 33px!important}
 footer.tpfoot .tpf-row1 .tpf-mid{top:5.5px!important}
 footer.tpfoot .tpf-sub{top:82px!important}
 footer.tpfoot .tpf-row2{margin-top:91px!important}
}

/* tpq-foot2line */

/* Two lines, not three. The publisher line and the icons ride the same line
   as the sign-up, so the footer reads as a pair of rows rather than a centre
   column with empty space either side of it. */
@media(min-width:761px){
 footer.tpfoot .tpf-in{padding:34px 46px 33px!important}
 footer.tpfoot .tpf-sub{top:auto!important;bottom:0!important;transform:translateX(-50%)!important}
 footer.tpfoot .tpf-row2{margin-top:26px!important;position:relative!important;
  align-items:center!important;min-height:38px!important}
 footer.tpfoot .tpf-row2 .tpf-sub{position:absolute!important;left:50%!important;
  top:50%!important;bottom:auto!important;transform:translate(-50%,-50%)!important}
}

/* tpq-footmob */

/* On a phone the footer stacks: the sign-up gets its own line at full width
   instead of sharing a row it cannot fit on. */
@media(max-width:760px){
 footer.tpfoot .tpf-row2{display:flex!important;flex-direction:column!important;
  align-items:flex-start!important;gap:18px!important;position:static!important;
  min-height:0!important;margin-top:22px!important}
 footer.tpfoot .tpf-row2 .tpf-sub{position:static!important;transform:none!important;
  left:auto!important;top:auto!important;bottom:auto!important;
  width:100%!important;max-width:320px!important;margin:0!important;order:-1!important}
 footer.tpfoot .tpf-row2 .tpf-pub,footer.tpfoot .tpf-row2 .tpf-soc{align-self:flex-start!important;margin:0!important}
 footer.tpfoot .tpf-sub input[type=email]{height:36px!important}
 footer.tpfoot .tpf-sub button{height:36px!important;padding:0 16px!important}
}

/* tpq-brief-final */

/* The Brief, finished. The sign-up is gone - it lives in the footer now - and
   the space it left carries a drawn bay instead of more sentences: the water
   the whole publication is about, in the same ink as the puzzle boards. */
.tpsay-f,.tpsay-done{display:none!important}
.tpsay-map{display:block!important;margin:0!important;padding:0!important}
.tpsay-map svg{display:block!important;width:100%!important;max-width:330px!important;height:auto!important}
.tpsay-map .land{fill:#ece9e3!important;stroke:#c8c4bd!important;stroke-width:1!important}
.tpsay-map .cway{stroke:#191712!important;stroke-width:1.4!important;fill:none!important;opacity:.55!important}
.tpsay-map .dot{fill:#c4ab67!important}
.tpsay-map .cap{display:block!important;margin:12px 0 0!important;
 font:700 10px/1 var(--tp-sans)!important;letter-spacing:2.4px!important;
 text-transform:uppercase!important;color:#87837c!important}
@media(min-width:761px){
 .tpsay-body.tpsay-body{grid-template-rows:auto auto auto!important;align-content:space-between!important}
 .tpsay-body.tpsay-body>p{grid-column:1!important;grid-row:1!important;align-self:start!important}
 .tpsay-map{grid-column:1!important;grid-row:2!important;align-self:center!important}
 .tpsay-note{grid-column:1!important;grid-row:3!important;align-self:end!important;margin:0!important}
 .tpsay-beats{grid-column:2!important;grid-row:1/4!important}
}
@media(max-width:760px){
 .tpsay-map{margin:22px 0 0!important}
 .tpsay-map svg{max-width:260px!important}
}

/* tpq-map2 */

.tpsay-map svg{max-width:220px!important}
.tpsay-map .coast{fill:none!important;stroke:#191712!important;stroke-width:1.5!important;
 stroke-linecap:round!important;stroke-linejoin:round!important}
.tpsay-map .isle{fill:none!important;stroke:#191712!important;stroke-width:1.5!important;
 stroke-linejoin:round!important}
.tpsay-map .cway{stroke:#c8c4bd!important;stroke-width:1.2!important;fill:none!important;opacity:1!important}
.tpsay-map .land{display:none!important}
.tpsay-map .dot{fill:#c4ab67!important}
.tpsay-map .cap{margin-top:14px!important}

/* tpq-line */

/* The middle of the column carries the paper's own position - one line, said
   plainly, in a bigger cut of the same serif. It is the only sentence on the
   page that is an opinion rather than a description. */
.tpsay-line{display:block!important;margin:0!important;padding:0!important;position:relative!important}
.tpsay-line::before{content:""!important;display:block!important;width:38px!important;height:2px!important;
 background:#c4ab67!important;margin:0 0 20px!important}
.tpsay-line p{margin:0!important;font:400 21px/1.42 var(--tp-serif)!important;
 color:#191712!important;letter-spacing:-.2px!important;max-width:19em!important}
@media(max-width:760px){
 .tpsay-line{margin:24px 0 0!important}
 .tpsay-line p{font-size:18px!important}
}
@media(min-width:761px){
 .tpsay-line{grid-column:1!important;grid-row:2!important;align-self:center!important}
}

/* tpq-line2 */

.tpsay .tpsay-body .tpsay-line p,.tpsay-body.tpsay-body .tpsay-line p{
 font:400 21px/1.42 "Iowan Old Style",Georgia,"Times New Roman",Times,serif!important;
 color:#191712!important;letter-spacing:-.2px!important;margin:0!important;max-width:19em!important}
@media(min-width:761px){
 .tpsay-note li:last-of-type{padding-bottom:10px!important;margin-bottom:0!important}
 .tpsay-in{padding-bottom:25.7px!important}
}

/* tpq-swap */

/* Left column reordered: the format first, the position line in the middle,
   the statement last - facts, then stance, then remit.
   Right column gets a head of its own so the six beats read as a set rather
   than as a list that starts out of nowhere. */
@media(min-width:761px){
 .tpsay-body.tpsay-body{grid-template-rows:auto auto auto!important;align-content:space-between!important}
 .tpsay-note{grid-column:1!important;grid-row:1!important;align-self:start!important;margin:0!important}
 .tpsay-line{grid-column:1!important;grid-row:2!important;align-self:center!important}
 .tpsay-body.tpsay-body>p{grid-column:1!important;grid-row:3!important;align-self:end!important;margin:0!important}
 .tpsay-right{grid-column:2!important;grid-row:1/4!important;display:flex!important;
  flex-direction:column!important;height:100%!important}
 .tpsay-beats{height:auto!important;flex:1 1 auto!important;align-content:space-between!important}
}
.tpsay-bhd{display:block!important;margin:0 0 22px!important;padding:0 0 12px!important;
 border-bottom:1px solid rgba(25,23,18,.20)!important}
.tpsay-bhd .k{display:block!important;font:700 10px/1 var(--tp-sans)!important;
 letter-spacing:2.4px!important;text-transform:uppercase!important;color:#876c22!important}
@media(max-width:760px){
 .tpsay-bhd{margin:24px 0 18px!important}
}

/* tpq-brief-b2 */

/* The Brief, final shape. The format list is gone. The two pieces of prose sit
   across the top, and Categories runs the floor as one strip - three across,
   two deep - so every one of the six keeps its description. */
@media(min-width:761px){
 .tpsay-note{display:none!important}
 .tpsay-body.tpsay-body{display:grid!important;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)!important;
  grid-template-rows:auto auto auto auto auto auto!important;
  column-gap:70px!important;row-gap:0!important;align-content:stretch!important}
 .tpsay-body.tpsay-body>p{grid-column:1!important;grid-row:1!important;align-self:start!important;
  margin:0!important;font:400 17.5px/1.62 var(--tp-serif)!important;color:#191712!important;max-width:26em!important}
 .tpsay-line{grid-column:2!important;grid-row:1!important;align-self:start!important;margin:0!important}
 .tpsay-line::before{margin:0 0 18px!important}
 .tpsay-right{grid-column:1/3!important;grid-row:2!important;display:flex!important;
  flex-direction:column!important;justify-content:flex-end!important;height:100%!important;
  margin-top:0!important;box-sizing:border-box!important}
 .tpsay-bhd{margin:0 0 24px!important;padding:0 0 12px!important}
 .tpsay-beats{height:auto!important;flex:0 0 auto!important;
  grid-template-columns:repeat(3,1fr)!important;column-gap:52px!important;row-gap:26px!important;
  align-content:start!important}
 .tpsay-beats li{padding:0 0 13px!important;margin:0!important;
  border-bottom:1px solid rgba(25,23,18,.13)!important}
 .tpsay-beats .k{margin:0 0 7px!important}
 .tpsay-beats .v{font:400 14px/1.5 var(--tp-serif)!important;color:#4a4740!important}
}
@media(max-width:760px){
 .tpsay-note{display:none!important}
}

/* tpq-brief-wide */

/* One blurb across the full width, then Categories given the rest of the band.
   The stance line is gone - the remit says it on its own. */
@media(min-width:761px){
 .tpsay-line{display:none!important}
 .tpsay-body.tpsay-body{display:grid!important;grid-template-columns:1fr!important;
  grid-template-rows:auto auto auto auto auto auto!important;row-gap:0!important;column-gap:0!important;
  align-content:stretch!important}
 .tpsay-body.tpsay-body>p{grid-column:1!important;grid-row:1!important;align-self:start!important;
  margin:0!important;max-width:none!important;
  font:400 22px/1.5 var(--tp-serif)!important;letter-spacing:-.25px!important;color:#191712!important}
 .tpsay-right{grid-column:1!important;grid-row:2!important;display:flex!important;
  flex-direction:column!important;justify-content:flex-end!important;height:100%!important;
  margin:0!important;box-sizing:border-box!important}
 .tpsay-bhd{margin:0 0 26px!important;padding:0 0 13px!important}
 .tpsay-beats{grid-template-columns:repeat(3,1fr)!important;
  column-gap:56px!important;row-gap:34px!important;height:auto!important;flex:0 0 auto!important}
 .tpsay-beats li{padding:0 0 17px!important;margin:0!important}
 .tpsay-beats .k{font-size:11px!important;letter-spacing:2.6px!important;margin:0 0 9px!important}
 .tpsay-beats .v{font:400 15.5px/1.5 var(--tp-serif)!important}
}
@media(max-width:760px){
 .tpsay-line{display:none!important}
}

/* tpq-brief-even */

/* The gap under the blurb equals the gap under the last category line, so the
   two blocks sit inside the same 47 frame top and bottom. Categories stretches
   to fill what is left rather than hugging the floor. */
@media(min-width:761px){
 .tpsay-body.tpsay-body{grid-template-rows:auto 1fr!important}
 .tpsay-right{justify-content:flex-start!important;padding-top:47px!important}
 .tpsay-beats{flex:1 1 auto!important;align-content:space-between!important;row-gap:0!important}
 .tpsay-beats li{padding:0 0 17px!important;margin:0!important}
}

/* tpq-evenframe */

/* Below 1024 the Feature was still on its desktop grid, so the photograph took
   the first cell and pushed the section heading down - 173px at 760, 252px at
   900. It stacks explicitly now, and every section frames on the same numbers. */
@media(max-width:760px){
 .mobx>section.cover{display:flex!important;flex-direction:column!important;
  align-items:stretch!important;grid-template-rows:none!important;grid-template-columns:none!important}
 .mobx>section.cover>.tpsec-hd{order:-2!important;margin:0 0 22px!important}
 .mobx>section.cover>.cover-img{order:-1!important;margin:0 0 22px!important;
  height:auto!important;align-self:stretch!important}
 .mobx>section.cover>.eyebrow{order:1!important}
 .mobx>section.cover>h2{order:2!important}
 .mobx>section.cover>.dek{order:3!important}
 .mobx>section.cover>.byline{order:4!important}
 .mobx>section.cover>a.readmore{order:5!important}
 /* the two short bands were sitting 19 and 16 deeper than the rest */
 .tpg-in{padding-bottom:0px!important}
 .tpsay-in{padding-bottom:24px!important}
}
/* Categories: the two rows were pushed apart to fill the band. A fixed gap
   instead, and the block sits on the floor of the section. */
@media(min-width:761px){
 .tpsay-right{justify-content:space-between!important;padding-top:47px!important}
 .tpsay-beats{flex:0 0 auto!important;align-content:start!important;row-gap:30px!important}
}

/* tpq-evenframe2 */

@media(min-width:761px){
 .mobx>section.cover{padding-bottom:46px!important}
}
@media(min-width:700px) and (max-width:760px){
 .mobx>section.cover{padding-top:39px!important;padding-bottom:33.5px!important}
}
@media(max-width:760px){
 .tpg-in{padding-bottom:-1px!important}
 .tpgames .tpg-in{padding-bottom:17px!important}
 .tpg-item.tpg-item{padding-bottom:0!important}
}

/* tpq-catfix */

@media(min-width:761px){
 /* the block sits on the floor of the band; the slack goes above the head,
    not between the head and the first row */
 .tpsay-right{justify-content:flex-end!important;padding-top:0!important}
 .tpsay-bhd{margin:0 0 26px!important}
}

/* tpq-pixframe */

/* Corrected against painted pixels, not the DOM. The element walker missed the
   photograph's shadow in the Feature and the card shadows in More, so both were
   sitting 7px shy of the rule below them. */
@media(min-width:761px){
 .mobx>section.cover{padding-bottom:53.5px!important}
 .tpmore-in{padding-bottom:46.6px!important}
 .tpsay-in{padding-bottom:26.2px!important}
}

/* tpq-pixframe2 */

/* Measured off painted pixels including hairlines and the photograph's shadow:
   the Feature was closing at 34.5 and the Brief at 26 while the others sat at
   47. Everything now ends 47 above the rule below it. */
@media(min-width:761px){
 .mobx>section.cover{padding-bottom:66px!important}
 .tpsay-in{padding-bottom:47.2px!important}
}

/* tpq-pixframe3 */

@media(min-width:761px) and (max-width:1179px){
 .tpmore-in{padding-bottom:53.6px!important}
}
@media(min-width:761px){
 .mobx>section.cover{padding-bottom:65.5px!important}
}

/* tpq-morefill */

/* The column rules between the three stories run the full height of the card,
   so the card box - not the date - is the last thing painted. The row now
   stretches to the content edge, which puts that rule exactly 47 above the
   next section rule at every width. */
@media(min-width:761px){
 .tpmore-in{padding-bottom:47px!important;display:flex!important;flex-direction:column!important}
 .tpmore-in>*:not(.tpmore-hd){flex:1 1 auto!important;align-items:stretch!important}
 .tpmore-c.tpmore-c{align-self:stretch!important}
}

/* tpq-morefill2 */

@media(min-width:761px) and (max-width:1179px){
 /* at this width the card runs 7px taller than the band allows, so the
    photograph gives up those 7px rather than the section rule */
 .tpmore-c.tpmore-c>a:first-child img,.tpmore-c.tpmore-c img{
  height:176px!important;object-fit:cover!important}
 .tpmore-c.tpmore-c>a:first-child,.tpmore-c.tpmore-c .thumb,.tpmore-c.tpmore-c figure{
  flex:0 0 auto!important;height:176px!important}
}

/* tpq-featlast */

@media(min-width:761px){.mobx>section.cover{padding-bottom:65px!important}}

/* tpq-noshadow */

/* The lead photograph carried a 32px drop shadow - the only shadow on the page.
   Its soft edge was reading as the section's last ink, so the picture's real
   edge sat 65.5 from the rule while the text sat 47. Shadow removed. */
.mobx section.cover>.cover-img,.mobx .cover-img{box-shadow:none!important}

/* tpq-boards */

/* Four marks that read as four different games, not four grids:
   Grid = solid tiles in groups, Five = a stack of guesses with empties above,
   Mini = a numbered crossword, Sweep = a path through a field of dots. */
.tpg-art svg .e{fill:#fff;stroke:#d8d4cd;stroke-width:1.6}
.tpg-art svg .cw{stroke:#191712;stroke-width:2.2}
.tpg-art svg .num{font:700 11px/1 -apple-system,Helvetica,Arial,sans-serif;fill:#87837c}

/* tpq-marks */

/* Four marks, four silhouettes: four tiles, one long slot, one square, one path.
   Heavy black line, a single orange accent each - no two read as the same game. */
.tpg-art svg{overflow:visible!important}
.tpg-art svg .mk{fill:none!important;stroke:#191712!important;stroke-width:7!important;
 stroke-linecap:round!important;stroke-linejoin:round!important}
.tpg-art svg .fo{fill:#c4ab67!important}
.tpg-art svg .fk{fill:#191712!important}
.tpg-art svg .no{stroke:none!important}
.tpg-art svg .no-fill{fill:none!important}
.tpg-art svg .pth2{fill:none!important;stroke:#191712!important;stroke-width:7!important;
 stroke-linecap:round!important;stroke-linejoin:round!important}

/* tpq-tile */

/* Each mark sits on its own tile, the way a games shelf reads - the icon is the
   thing you recognise, the name confirms it. Tile in the paper's own tone, one
   orange accent inside each mark. */
@media(min-width:761px){
 .tpg-item.tpg-item .tpg-art{background:#f4f3f1!important;border-radius:4px!important;
  padding:26px!important;justify-content:center!important;align-items:center!important;
  transition:background-color .38s ease!important}
 .tpg-item.tpg-item:hover .tpg-art{background:#eeebe6!important}
 .tpg-item.tpg-item .tpg-art svg{width:min(100%,116px)!important;max-height:116px!important}
 .tpg-item.tpg-item{padding-right:22px!important}
 .tpg-item.tpg-item+.tpg-item.tpg-item{padding-left:22px!important}
}
@media(max-width:760px){
 .tpg-art{background:#f4f3f1!important;border-radius:4px!important;padding:20px!important;
  display:inline-block!important}
 .tpg-art svg{width:92px!important}
}

/* tp-hive-css */
.tph-in{min-height:44px;display:flex;align-items:center;justify-content:center;gap:1px;
 font:700 27px/1 "Iowan Old Style",Georgia,serif;letter-spacing:1px;color:#191712;margin:6px 0 2px}
.tph-in .mid{color:#876c22}
.tph-in .ph{font:400 15px/1 "Iowan Old Style",Georgia,serif;color:#a9a49c;letter-spacing:0}
.tph-comb{display:flex;justify-content:center;margin:2px 0 14px}
.tph-comb svg{width:236px;height:auto;display:block}
.tph-cell polygon{fill:#efece7;stroke:#fff;stroke-width:4;cursor:pointer;transition:fill .18s ease}
.tph-cell.mid polygon{fill:#c4ab67}
.tph-cell:hover polygon{fill:#e3dfd8}
.tph-cell.mid:hover polygon{fill:#b89947}
.tph-cell text{font:700 24px/1 "Iowan Old Style",Georgia,serif;fill:#191712;text-anchor:middle;
 pointer-events:none;user-select:none}
.tph-cell.mid text{fill:#fff}
.tph-ctrl{display:flex;gap:10px;justify-content:center;margin:2px 0 10px}
.tph-score{font:700 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
 letter-spacing:2.2px;text-transform:uppercase;color:#87837c;text-align:center;margin:4px 0 10px}
.tph-score b{color:#191712;font-size:13px}
.tph-list{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;max-height:132px;overflow:auto;
 padding:2px 0 4px}
.tph-w{font:400 13px/1 "Iowan Old Style",Georgia,serif;color:#4a4740;
 border:1px solid #e2ded7;padding:6px 9px;border-radius:2px}
.tph-w.pan{border-color:#c4ab67;color:#876c22;font-weight:700}
@media(max-width:560px){.tph-comb svg{width:200px}.tph-in{font-size:23px}}

/* tpq-hivefix */

.tph-cell polygon{stroke-linejoin:miter!important;stroke-width:3.5!important;shape-rendering:geometricPrecision}
.tph-cell.mid polygon{stroke:#fff!important}

/* tpq-notile */

/* The grey tiles staggered because each card's description is a different
   height. Tiles gone, marks sit on the page and start on one line. */
@media(min-width:761px){
 .tpg-item.tpg-item{display:grid!important;
  grid-template-rows:auto 46px 1fr auto!important;padding:0 26px 0 0!important}
 .tpg-item.tpg-item+.tpg-item.tpg-item{padding-left:26px!important}
 .tpg-item.tpg-item .tpg-txt{display:contents!important}
 .tpg-item.tpg-item .tpg-n{grid-row:1!important;margin:0 0 8px!important}
 .tpg-item.tpg-item .tpg-d{grid-row:2!important;margin:0!important;align-self:start!important}
 .tpg-item.tpg-item .tpg-art{grid-row:3!important;background:none!important;padding:22px 0 0!important;
  align-self:center!important;justify-content:flex-start!important;margin:0!important}
 .tpg-item.tpg-item:hover .tpg-art{background:none!important}
 .tpg-item.tpg-item .tpg-art svg{width:96px!important;max-height:96px!important}
 .tpg-item.tpg-item::after{grid-row:4!important;padding-top:0!important;margin-top:0!important}
}
@media(max-width:760px){
 .tpg-art{background:none!important;padding:0!important}
}

/* tpq-gameshd */

/* The games header carries a way through to the full shelf, the same as the
   archive link on the stories row. The marks sit up under their descriptions
   instead of floating in the middle of the card. */
@media(min-width:761px){
 .tpg-hd.tpg-hd{display:flex!important;align-items:baseline!important;
  justify-content:space-between!important;gap:24px!important;width:100%!important}
 .tpg-hd.tpg-hd h2{flex:0 0 auto!important}
 .tpg-hd.tpg-hd a{flex:0 0 auto!important;
  font:700 10px/1 var(--tp-sans)!important;letter-spacing:2.4px!important;
  text-transform:uppercase!important;color:#876c22!important;text-decoration:none!important;
  border-bottom:1px solid rgba(196,171,103,.45)!important;padding-bottom:4px!important;
  transition:color .28s ease,border-color .28s ease!important}
 .tpg-hd.tpg-hd a:hover{color:#191712!important;border-bottom-color:#191712!important}
 .tpg-item.tpg-item{grid-template-rows:auto 46px auto 1fr auto!important}
 .tpg-item.tpg-item .tpg-art{grid-row:3!important;padding:26px 0 0!important;align-self:start!important}
 .tpg-item.tpg-item::after{grid-row:5!important}
}
@media(max-width:760px){
 .tpg-hd.tpg-hd{display:flex!important;align-items:baseline!important;
  justify-content:space-between!important;gap:16px!important}
 .tpg-hd.tpg-hd a{font:700 10px/1 var(--tp-sans)!important;letter-spacing:2.2px!important;
  text-transform:uppercase!important;color:#876c22!important;text-decoration:none!important}
}

/* tpq-markbig */

@media(min-width:761px){
 /* the marks carry the band instead of floating in it */
 .tpg-item.tpg-item .tpg-art svg{width:min(100%,146px)!important;max-height:146px!important}
 .tpg-item.tpg-item .tpg-art{padding:30px 0 0!important}
}

/* tpq-games3 */

/* Three on the home page, the fourth lives behind See all eight.
   Every mark gets the same 132px box so the four sit on one line and read as
   one set, and the row keeps clear of the rule above it. */
@media(min-width:761px){
 .tpg-item.tpg-item{padding-top:30px!important}
 .tpg-item.tpg-item .tpg-art{padding:34px 0 0!important;height:auto!important}
 .tpg-item.tpg-item .tpg-art svg{width:132px!important;height:132px!important;
  max-width:132px!important;max-height:132px!important}
}
@media(max-width:760px){
 .tpgames[data-shelf="home"] .tpg-item:nth-child(n+4){display:none!important}
 .tpg-art svg{width:104px!important;height:104px!important}
}

/* tp-ledger-css */
.tpl-board{display:grid;grid-template-columns:repeat(9,1fr);width:min(100%,378px);margin:10px auto 14px;
 border:2px solid #191712;background:#191712;gap:1px}
.tpl-c{aspect-ratio:1;border:0;background:#fff;cursor:pointer;padding:0;
 font:400 20px/1 "Iowan Old Style",Georgia,serif;color:#4a4740;
 display:flex;align-items:center;justify-content:center;transition:background-color .12s ease}
.tpl-c.br{box-shadow:1px 0 0 #191712}
.tpl-c.bb{box-shadow:0 1px 0 #191712}
.tpl-c.br.bb{box-shadow:1px 0 0 #191712,0 1px 0 #191712}
.tpl-c.fixed{font-weight:700;color:#191712;background:#f4f3f1}
.tpl-c.hi{background:#faf9f7}
.tpl-c.fixed.hi{background:#eeebe6}
.tpl-c.same{background:#ffe6df}
.tpl-c.sel{background:#c4ab67;color:#fff}
.tpl-c.bad{color:#876c22}
.tpl-c.sel.bad{color:#fff}
.tpl-pad{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;width:min(100%,378px);margin:0 auto 12px}
.tpl-k{border:1px solid #e2ded7;background:#fff;border-radius:2px;padding:11px 0;cursor:pointer;
 font:400 18px/1 "Iowan Old Style",Georgia,serif;color:#191712;transition:.16s}
.tpl-k:hover{border-color:#191712}
.tpl-k.wide{grid-column:span 5;font:700 10px/1 -apple-system,Helvetica,Arial,sans-serif;
 letter-spacing:2.4px;text-transform:uppercase;padding:12px 0;color:#87837c}
@media(max-width:560px){.tpl-c{font-size:17px}.tpl-board,.tpl-pad{width:min(100%,320px)}}

/* tpq-lg */
.tpg-art svg .lg{font:700 25px/1 -apple-system,Helvetica,Arial,sans-serif;fill:#191712}
/* tpq-ledgerfix */

.tpl-board{gap:0!important;background:#fff!important}
.tpl-c{box-sizing:border-box!important;border:1px solid #dcd8d1!important;box-shadow:none!important}
.tpl-c.br{border-right:2px solid #191712!important}
.tpl-c.bb{border-bottom:2px solid #191712!important}

/* tpq-mastswap */

/* The six categories ran twice on the page - once under the nameplate and once
   in The Brief. The rail under the nameplate is gone and the publishing line
   takes its place, so the masthead ends on when rather than what. */
@media(min-width:761px){
 .mobx>.mast .dm-idx{display:none!important}
 .mobx>.mast .dm-meta{margin-top:78px!important}
 .mobx>.mast .dm-meta span,.mobx>.mast .dm-sched{
  font:700 11.5px/1 var(--tp-sans)!important;letter-spacing:3px!important;
  text-transform:uppercase!important;color:#191712!important}
 /* the marks were shouting - back to the size of the type around them */
 .tpg-item.tpg-item .tpg-art svg{width:104px!important;height:104px!important;
  max-width:104px!important;max-height:104px!important}
 .tpg-item.tpg-item .tpg-art{padding:28px 0 0!important}
}
@media(max-width:760px){
 .mobx>.mast .dm-idx{display:none!important}
 .tpg-art svg{width:88px!important;height:88px!important}
}

/* tpq-mastheight */

@media(min-width:761px){
 /* the rail is gone, so the masthead no longer needs the height it held for it */
 .mobx>.mast{height:auto!important;min-height:0!important;padding-bottom:44px!important}
 .mobx>.mast .dm-meta{margin-top:52px!important}
}

/* tpq-featmid */

@media(min-width:761px){
 /* the photograph sits centred in the band on its own proportions rather than
    stretched to the frame */
 .mobx section.cover>.cover-img{align-self:center!important;height:auto!important;
  max-height:none!important;aspect-ratio:auto!important}
 .mobx section.cover>.cover-img img{height:auto!important;width:100%!important;
  object-fit:contain!important}
}

/* tpq-featmid2 */

@media(min-width:761px) and (max-width:1179px){
 /* at this width the photograph is shorter than the band, so the copy column
    distributes to the frame instead of leaving the gap at the foot */
 .mobx>section.cover{align-content:space-between!important}
}

/* tpq-featmid3 */

@media(min-width:761px) and (max-width:1179px){
 /* drop the trailing spacer row so the last line of copy lands on the frame */
 .mobx>section.cover{grid-template-rows:auto 1fr auto auto auto auto auto 0!important;
  align-content:stretch!important}
}

/* tpq-featcentre */

@media(min-width:1180px){
 /* the photograph centres on the band, not on the copy rows below the title */
 .mobx section.cover>.cover-img{grid-row:1/-1!important;align-self:center!important}
}

/* tpq-featcentre2 */

@media(min-width:1180px){
 /* the copy fills the band top to bottom; the photograph centres against it */
 .mobx>section.cover{grid-template-rows:auto 1fr auto auto auto auto auto 0!important;
  align-content:stretch!important}
}

/* tpq-solve */

@media(max-width:760px){
 .mobx>section.cover.cover{padding-top:47.00px!important;padding-bottom:46.00px!important}
 .tpmore .tpmore-in.tpmore-in{padding-top:45.00px!important;padding-bottom:38.50px!important}
 .tpgames .tpg-in.tpg-in{padding-top:45.00px!important;padding-bottom:46.00px!important}
 .tpsay .tpsay-in.tpsay-in{padding-top:45.00px!important;padding-bottom:47.00px!important}
}
@media(min-width:761px) and (max-width:1179px){
 .mobx>section.cover.cover{padding-top:47.00px!important;padding-bottom:46.00px!important}
 .tpmore .tpmore-in.tpmore-in{padding-top:46.00px!important;padding-bottom:46.00px!important}
 .tpgames .tpg-in.tpg-in{padding-top:46.00px!important;padding-bottom:46.00px!important}
 .tpsay .tpsay-in.tpsay-in{padding-top:46.00px!important;padding-bottom:46.00px!important}
}
@media(min-width:1180px){
 .mobx>section.cover.cover{padding-top:47.00px!important;padding-bottom:46.00px!important}
 .tpmore .tpmore-in.tpmore-in{padding-top:46.00px!important;padding-bottom:46.00px!important}
 .tpgames .tpg-in.tpg-in{padding-top:46.00px!important;padding-bottom:46.00px!important}
 .tpsay .tpsay-in.tpsay-in{padding-top:46.00px!important;padding-bottom:46.00px!important}
}

/* tpq-cov47 */
@media (min-width:1280px){.mobx>section.cover.cover{padding-top:calc(47px + 0px)}.mobx>section.cover.cover a.readmore{display:inline-block;margin-bottom:5px}}
/* tpq-even47 */
.tpsay .tpsay-in.tpsay-in,.tpmore .tpmore-in.tpmore-in,.tpgames .tpg-in.tpg-in{padding-top:0!important;padding-bottom:0!important}.tpsay .tpsay-beats li:last-child{padding-bottom:0!important}.tpmore .tpmore-c{padding-bottom:0!important}@media (max-width:767px){.mobx>section.cover.cover{height:auto!important;min-height:0!important;box-sizing:border-box!important;padding-top:47.00px!important;padding-bottom:41.00px!important}.tpmore.tpmore{height:auto!important;min-height:0!important;box-sizing:border-box!important;padding-top:47.00px!important;padding-bottom:40.61px!important}.tpgames.tpgames{height:auto!important;min-height:0!important;box-sizing:border-box!important;padding-top:47.00px!important;padding-bottom:4.44px!important}.tpsay.tpsay{height:auto!important;min-height:0!important;box-sizing:border-box!important;padding-top:46.00px!important;padding-bottom:43.00px!important}}@media (min-width:768px) and (max-width:1279px){.mobx>section.cover.cover{height:auto!important;min-height:0!important;box-sizing:border-box!important;padding-top:47.00px!important;padding-bottom:42.00px!important}.tpmore.tpmore{height:auto!important;min-height:0!important;box-sizing:border-box!important;padding-top:47.00px!important;padding-bottom:40.61px!important}.tpgames.tpgames{height:auto!important;min-height:0!important;box-sizing:border-box!important;padding-top:47.00px!important;padding-bottom:47.00px!important}.tpsay.tpsay{height:auto!important;min-height:0!important;box-sizing:border-box!important;padding-top:46.00px!important;padding-bottom:25.75px!important}}@media (min-width:1280px){.mobx>section.cover.cover{height:auto!important;min-height:0!important;box-sizing:border-box!important;padding-top:47.00px!important;padding-bottom:42.00px!important}.tpmore.tpmore{height:auto!important;min-height:0!important;box-sizing:border-box!important;padding-top:47.00px!important;padding-bottom:40.61px!important}.tpgames.tpgames{height:auto!important;min-height:0!important;box-sizing:border-box!important;padding-top:47.00px!important;padding-bottom:47.00px!important}.tpsay.tpsay{height:auto!important;min-height:0!important;box-sizing:border-box!important;padding-top:46.00px!important;padding-bottom:25.75px!important}}
/* word search: live drag trail */
.tps-c.trail{background:#141416!important;color:#fff!important;border-color:#141416!important}
.tps-grid{touch-action:none!important;user-select:none!important}

/* tp-stats */
.tpst{margin:16px 0 4px!important;padding:16px 16px 14px!important;text-align:center!important;
 background:#f6f5f2!important;border:1px solid rgba(20,20,22,.1)!important;border-radius:7px!important}
.tpst-hd{margin:0 0 12px!important;
 font:700 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
 letter-spacing:2.2px!important;text-transform:uppercase!important;color:#8b8781!important}
.tpst-row{display:flex!important;justify-content:center!important;flex-wrap:wrap!important;gap:22px!important;
 margin:0 0 14px!important}
.tpst-c{display:flex!important;flex-direction:column!important;align-items:center!important;gap:3px!important}
.tpst-c b{font:700 25px/1 "Iowan Old Style",Georgia,serif!important;color:#141416!important;
 font-variant-numeric:tabular-nums!important}
.tpst-c i{font:400 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
 font-style:normal!important;letter-spacing:1.4px!important;text-transform:uppercase!important;color:#8b8781!important}
.tpst-share{padding:10px 22px!important;border-radius:99px!important;cursor:pointer!important;
 background:#141416!important;color:#fff!important;border:1px solid #141416!important;
 font:700 12px/1 "Iowan Old Style",Georgia,serif!important}
.tpst-share:hover{opacity:.8!important}

/* ---------- tighten: the game cards ---------- */
/* the splash tutorial covers the rules now - the inline block was a second copy */
.tpb-how,.tps-how,.tpm-how{display:none!important}

.tpg-shell .tpg-card{width:100%!important;max-width:660px!important;
 padding:26px 30px 28px!important}


/* header block: eyebrow, title, one line, and a way back to the rules */
.tpg-card .tpg-eyebrow{margin:0 0 4px!important}
.tpg-card h3{margin:0 0 4px!important}
.tpg-card .tpg-sub{margin:0 0 16px!important;font-size:14px!important;line-height:1.4!important}
.tpg-help{position:absolute!important;top:22px!important;right:52px!important;
 padding:5px 12px!important;border-radius:99px!important;cursor:pointer!important;
 background:none!important;border:1px solid rgba(20,20,22,.2)!important;
 font:700 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
 letter-spacing:1.4px!important;text-transform:uppercase!important;color:#8b8781!important}
.tpg-help:hover{border-color:#141416!important;color:#141416!important}

/* vertical rhythm inside the boards */
.tps-hud,.tpm-hud,.tpc2-hud{margin:0 0 10px!important}
.tps-tools{margin:10px 0 8px!important}
.tpb-rank{margin:0 0 10px!important}
.tpb-in{min-height:34px!important;margin:0 0 4px!important}
.tpb-found{margin:10px 0 0!important;max-height:112px!important;padding:11px 13px!important}
.tpb-left{margin:8px 0 0!important;font:400 12.5px/1.45 "Iowan Old Style",Georgia,serif!important;
 color:#5a5750!important}
.tpc2-word{min-height:32px!important}
.tpc2-list{margin:10px 0 0!important}
.tpg-msg{margin:8px 0 0!important;min-height:18px!important}

/* the results card, trimmed */
.tpst{margin:12px 0 2px!important;padding:13px 14px 12px!important}
.tpst-hd{margin:0 0 9px!important}
.tpst-row{gap:20px!important;margin:0 0 11px!important}
.tpst-c b{font-size:22px!important}

/* Word Groups lives in its own wrapper - same frame as the rest */
#tpgwrap .tpg-card{width:100%!important;max-width:660px!important;padding:26px 30px 28px!important}
/* the mini is a 5x5 - it does not need the wide frame */

/* word search: keep the grid inside a sane box */
.tps-grid{max-width:520px!important;margin:0 auto!important}
.tps-c{font-size:14px!important}
.tps-list{margin:12px 0 0!important;font-size:12.5px!important}


/* one frame for every game: same box model, same width, same padding */
.tpg-shell .tpg-card,#tpgwrap .tpg-card,.tpg-card.tpg-wide{
 box-sizing:border-box!important;width:100%!important;max-width:660px!important;
 padding:26px 30px 28px!important}
.tpg-shell .tpg-card *,#tpgwrap .tpg-card *{box-sizing:border-box!important}
/* word search alone needs room for an 11x11 grid */
.tpg-shell .tpg-card:has(.tps-grid){max-width:720px!important}

/* ============================================================
   DESKTOP GAME SYSTEM — one card, one board scale, one rhythm
   card    660 wide, 26/30/28 padding  → 600 of usable width
   board   520 wide, centred            (mini 460, hive 300, chain 340)
   ============================================================ */
.tpg-shell .tpg-card,#tpgwrap .tpg-card,.tpg-card.tpg-wide,
.tpg-shell .tpg-card:has(.tps-grid){max-width:660px!important}

/* every board lands on the same 520 axis */
.tpg-board,.tps-grid,.tpl-board,.tpm-board,.tpf-board,.tpg-solved{
 width:520px!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important}

/* --- Sudoku: 9 x 56 = 504 --- */
.tpl-board{width:506px!important;display:grid!important;
 grid-template-columns:repeat(9,1fr)!important;gap:0!important}
.tpl-c{width:auto!important;height:56px!important;
 font:700 24px/1 "Iowan Old Style",Georgia,serif!important}
.tpl-c.pencil,.tpl-c.pencil u{font-size:11px!important;line-height:1.2!important}
.tpl-pad{display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:8px!important;
 width:506px!important;margin:14px auto 0!important}
.tpl-k{height:48px!important;font:700 20px/1 "Iowan Old Style",Georgia,serif!important}
.tpl-k.wide{grid-column:1/-1!important;height:42px!important;font-size:12px!important}

/* --- Word Search: 11 x 46 = 506 --- */
.tps-grid{width:506px!important}
.tps-c{aspect-ratio:1!important;font:700 17px/1 "Iowan Old Style",Georgia,serif!important}

/* --- Mini Crossword: 5 x 92 = 460, square cells --- */



/* --- Spelling Bee: hive 300 --- */
.tpb-comb svg{width:300px!important;height:284px!important}

/* --- Letter Chain: 340 --- */
.tpc2-box svg{width:340px!important;height:340px!important}

/* --- Memory Match: 520 board --- */
.tpm-board{width:520px!important;gap:12px!important}
.tpm-c .tpm-face{font-size:14px!important}

/* one vertical rhythm for every card */
.tpg-card .tpg-board,.tpg-card .tps-grid,.tpg-card .tpl-board,
.tpg-card .tpm-board,.tpg-card .tpf-board{margin-top:4px!important;margin-bottom:0!important}
.tpg-btns{margin-top:16px!important}

/* Sudoku: 9 x 52 = 468 keeps the whole game on one screen */
.tpl-board{width:470px!important}
.tpl-c{height:52px!important;font-size:22px!important}
.tpl-pad{grid-template-columns:repeat(9,1fr)!important;gap:6px!important;width:470px!important;
 margin:12px auto 0!important}
.tpl-k{height:44px!important;font-size:18px!important}
.tpl-k.wide{grid-column:1/-1!important;height:38px!important}

/* Mini Crossword: grid and clues side by side, both on the same axis */
.tpm-wrap{display:flex!important;gap:24px!important;align-items:flex-start!important;
 justify-content:center!important}


.tpm-clues{flex:1 1 auto!important;text-align:left!important;max-width:236px!important}


/* Mini Crossword: 5 x 64 = 320, clues beside it */
.tpm-wrap{display:flex!important;gap:26px!important;align-items:flex-start!important;
 justify-content:center!important}
.tpm-grid{grid-template-columns:repeat(5,64px)!important;grid-auto-rows:64px!important;
 width:auto!important;flex:0 0 auto!important}
.tpm-grid .tpm-c{width:64px!important;height:64px!important;
 font:700 26px/1 "Iowan Old Style",Georgia,serif!important}
.tpm-clues{flex:1 1 auto!important;text-align:left!important;max-width:240px!important}

/* Sudoku: the 3x3 boxes have to read at a glance */
.tpl-board{border:2px solid #141416!important}
.tpl-c{border:1px solid rgba(20,20,22,.22)!important}
.tpl-c.br{border-right:2px solid #141416!important}
.tpl-c.bb{border-bottom:2px solid #141416!important}

/* ============================================================
   SUDOKU GRID — exact geometry
   9 cells x 52px + 8 gaps x 1px = 476 content, + 2px border each side = 480
   cells carry NO borders: every line is a gap over the board's black ground,
   so no line doubles and nothing shifts the digit off centre.
   box rules sit on an overlay at x/y 157 and 316 (3px, centred on the gap)
   ============================================================ */
.tpl-board{position:relative!important;display:grid!important;
 grid-template-columns:repeat(9,52px)!important;grid-auto-rows:52px!important;
 gap:1px!important;width:480px!important;padding:0!important;
 background:rgba(20,20,22,.26)!important;border:2px solid #141416!important;
 margin:0 auto!important;box-sizing:border-box!important}
.tpl-board::after{content:""!important;position:absolute!important;
 left:0!important;top:0!important;width:476px!important;height:476px!important;
 pointer-events:none!important;z-index:3!important;
 background-image:linear-gradient(#141416,#141416),linear-gradient(#141416,#141416),
                  linear-gradient(#141416,#141416),linear-gradient(#141416,#141416)!important;
 background-size:3px 100%,3px 100%,100% 3px,100% 3px!important;
 background-position:157px 0,316px 0,0 157px,0 316px!important;
 background-repeat:no-repeat!important}
.tpl-c{width:52px!important;height:52px!important;border:0!important;margin:0!important;
 padding:0!important;box-sizing:border-box!important;background:#fff!important;
 display:flex!important;align-items:center!important;justify-content:center!important;
 font:700 24px/1 "Iowan Old Style",Georgia,serif!important;color:#141416!important;
 -webkit-font-smoothing:antialiased!important}
.tpl-c.br,.tpl-c.bb{border:0!important}
.tpl-c.fixed{background:#f2f0ec!important;cursor:default!important}
.tpl-c.hi{background:#faf9f7!important}
.tpl-c.fixed.hi{background:#eae7e1!important}
.tpl-c.same{background:#e8e5de!important}
.tpl-c.sel{background:#c4ab67!important;color:#fff!important;z-index:2!important}
.tpl-c.bad{color:#876c22!important;background:#fdece7!important}
.tpl-c.wrong{color:#876c22!important}
.tpl-c.hint{background:#f3efe2!important}
.tpl-c.pencil{font:400 11px/1.15 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
 color:#8b8781!important}
.tpl-pad{width:480px!important;margin:14px auto 0!important}

/* ============================================================
   DIFFICULTY — a real segmented control
   300 wide, 42 tall, 4px inset, three equal 97.33px segments
   ============================================================ */
.tpsh-diff{display:flex!important;gap:0!important;width:300px!important;height:42px!important;
 margin:0 auto 12px!important;padding:4px!important;box-sizing:border-box!important;
 background:rgba(20,20,22,.07)!important;border-radius:99px!important}
.tpsh-diff button{flex:1 1 0!important;min-width:0!important;height:34px!important;
 padding:0!important;margin:0!important;border:0!important;background:none!important;
 border-radius:99px!important;cursor:pointer!important;
 font:700 13px/34px "Iowan Old Style",Georgia,serif!important;color:#5a5750!important;
 transition:background .16s ease,color .16s ease!important}
.tpsh-diff button:hover{color:#141416!important}
.tpsh-diff button.on{background:#fff!important;color:#141416!important;
 box-shadow:0 1px 3px rgba(20,20,22,.14)!important}
.tpsh-dnote{margin:0 0 22px!important;min-height:18px!important;
 font:400 13px/1.4 "Iowan Old Style",Georgia,serif!important;color:#5a5750!important}
.tpsh-splash .tpsh-d{margin:0 0 20px!important}
.tpsh-btns{margin:0!important}

/* ============================================================
   ONE CARD SHAPE FOR ALL EIGHT
   660 x 800, header pinned top, message + buttons pinned bottom,
   the board floats in the middle of what is left.
   ============================================================ */
.tpg-shell .tpg-card,#tpgwrap .tpg-card{
 min-height:800px!important;display:flex!important;flex-direction:column!important;
 align-items:stretch!important}
.tpg-shell .tpg-card > .tpg-eyebrow,#tpgwrap .tpg-card > .tpg-eyebrow,
.tpg-shell .tpg-card > h3,#tpgwrap .tpg-card > h3,
.tpg-shell .tpg-card > .tpg-sub,#tpgwrap .tpg-card > .tpg-sub{flex:0 0 auto!important}
/* the message and everything after it sits on the floor of the card */
.tpg-card > .tpg-msg{margin-top:auto!important;padding-top:14px!important}
.tpg-card > .tpg-btns:last-child{flex:0 0 auto!important}
/* JS adds .tpg-float to the first element under the header - the pair of
   auto margins centres the board in the space between header and footer */
.tpg-card > .tpg-float{margin-top:auto!important}

/* Sudoku has to fit the same box: trim the gaps, keep the 52px cells */
.tps-hud{margin:0 0 8px!important}
.tps-tools{margin:10px 0 0!important}
.tpl-pad{margin:10px auto 0!important}
.tpl-k{height:42px!important}
.tpl-k.wide{height:34px!important}

/* Sudoku: last 11px so it lands on 800 like the rest */
.tps-tools{margin:6px 0 0!important}
.tpl-pad{margin:8px auto 0!important;gap:5px!important}
.tpl-k{height:40px!important}
.tpl-k.wide{height:30px!important;font-size:11px!important}

/* ============================================================
   ONE PALETTE — ink, paper, warm greys, and orange as the only accent.
   No greens, no blues, anywhere in the games.
   ============================================================ */
/* marks: digits sit on the centre of their cell, not on a baseline guess */
.tpg-art svg .lg,.tpc-art svg .lg,.tpsh-icon svg .lg{
 text-anchor:middle!important;dominant-baseline:central!important;
 font:700 26px/1 "Iowan Old Style",Georgia,serif!important;fill:#141416!important}

/* Mini Crossword: the word you are on, and the square you are in */
.tpm-grid .tpm-c.line{background:#eeeae2!important}
.tpm-grid .tpm-c.sel{background:#c4ab67!important;color:#fff!important}
.tpm-grid .tpm-c.blk{background:#141416!important}
.tpm-grid .tpm-c{background:#fff!important;
 border-right:1px solid rgba(20,20,22,.26)!important;
 border-bottom:1px solid rgba(20,20,22,.26)!important}
.tpm-grid{border:2px solid #141416!important;box-sizing:content-box!important}
.tpm-grid .tpm-c:nth-child(5n){border-right:0!important}
.tpm-grid .tpm-c:nth-child(n+21){border-bottom:0!important}
.tpm-clues h4{font:700 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
 letter-spacing:2px!important;text-transform:uppercase!important;color:#8b8781!important;margin:0 0 10px!important}
.tpm-clues li{font:400 13.5px/1.42 "Iowan Old Style",Georgia,serif!important;color:#33312c!important;
 margin:0 0 9px!important}
.tpm-clues li.on{font-weight:700!important;color:#141416!important}

/* ============================================================
   ONE INK. The marks were drawn with three different blacks
   (#191712, #141416 and pure #000). All of them are #141416 now.
   ============================================================ */
.tpg-art svg .mk,.tpc-art svg .mk,.tpsh-icon svg .mk,
.tpg-art svg .s0,.tpc-art svg .s0,.tpsh-icon svg .s0{stroke:#141416!important}
.tpg-art svg .fk,.tpc-art svg .fk,.tpsh-icon svg .fk,
.tpg-art svg .f0,.tpc-art svg .f0,.tpsh-icon svg .f0,
.tpg-art svg .lg,.tpc-art svg .lg,.tpsh-icon svg .lg,
.tpg-art svg .num,.tpsh-icon svg .num{fill:#141416!important}
.tpg-art svg .fo,.tpc-art svg .fo,.tpsh-icon svg .fo,
.tpg-art svg .f1,.tpc-art svg .f1,.tpsh-icon svg .f1{fill:#c4ab67!important}
.tpg-art svg .pth2,.tpsh-icon svg .pth2,
.tpg-art svg .s1,.tpsh-icon svg .s1{stroke:#c4ab67!important}
.tpg-art svg .f2,.tpsh-icon svg .f2{fill:#ffffff!important}
.tpg-art svg .f3,.tpsh-icon svg .f3{fill:rgba(20,20,22,.3)!important}
/* any raw black left inside a mark */
.tpg-art svg [fill="#000"],.tpg-art svg [fill="black"],
.tpsh-icon svg [fill="#000"],.tpsh-icon svg [fill="black"]{fill:#141416!important}
.tpg-art svg .cw{stroke:#141416!important}

/* ============================================================
   GAMES BANNER — the marks float on tiles, our tones only
   ============================================================ */
.tpgh{display:block!important;position:relative!important;overflow:hidden!important;
 background:#f4f3f1!important;border-bottom:1px solid rgba(20,20,22,.12)!important}
.tpgh-in{position:relative!important;max-width:1348px!important;margin:0 auto!important;
 height:430px!important;padding:0 46px!important;box-sizing:border-box!important}
.tpgh-tiles{position:absolute!important;inset:0!important;pointer-events:none!important}
.tpgh-t{position:absolute!important;display:flex!important;align-items:center!important;
 justify-content:center!important;border-radius:18%!important;
 background:#e8e6e1!important;box-shadow:0 6px 20px rgba(20,20,22,.06)!important;
 animation:tpghfloat 9s ease-in-out infinite!important}
.tpgh-t svg{width:62%!important;height:62%!important;display:block!important;overflow:visible!important}
.tpgh-t svg *{vector-effect:non-scaling-stroke!important}
.tpgh-t svg .mk,.tpgh-t svg .pth2{stroke-width:3px!important}
.tpgh-t svg .mk,.tpgh-t svg .s0{stroke:#141416!important}
.tpgh-t svg .fk,.tpgh-t svg .f0,.tpgh-t svg .lg{fill:#141416!important}
.tpgh-t svg .fo,.tpgh-t svg .f1{fill:#c4ab67!important}
.tpgh-t svg .pth2,.tpgh-t svg .s1{stroke:#c4ab67!important}
.tpgh-t svg .f2{fill:#fff!important}
@keyframes tpghfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@media (prefers-reduced-motion:reduce){.tpgh-t{animation:none!important}}

.tpgh-say{position:relative!important;z-index:2!important;height:100%!important;
 display:flex!important;flex-direction:column!important;align-items:center!important;
 justify-content:center!important;text-align:center!important}
.tpgh-eyebrow{font:700 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
 letter-spacing:2.6px!important;text-transform:uppercase!important;color:#8b8781!important;margin:0 0 12px!important}
.tpgh h1{margin:0 0 10px!important;
 font:700 58px/1.02 "Iowan Old Style",Georgia,"Times New Roman",Times,serif!important;color:#141416!important}
.tpgh-say p{margin:0!important;
 font:400 18px/1.4 "Iowan Old Style",Georgia,serif!important;color:#5a5750!important}
@media (max-width:760px){
 .tpgh-in{height:300px!important;padding:0 22px!important}
 .tpgh h1{font-size:38px!important}
 .tpgh-t{display:none!important}
 .tpgh-t.keep{display:flex!important}
}

/* the small duplicate mark beside each title - the big one is the mark */
.tpg-item .tpg-mark{display:none!important}
/* nothing in the band may clip */
.tpgames,.tpg-in,.tpg-grid,.tpg-item{overflow:visible!important}

/* the marks are line drawings: .mk is a stroke, never a fill */
.tpgh-t svg .mk,.tpgh-t svg .pth2{fill:none!important}
.tpgh-t svg .mk.fo,.tpgh-t svg .fo{fill:#c4ab67!important}
.tpgh-t svg .mk.fk,.tpgh-t svg .fk{fill:#141416!important}
.tpgh-t svg .no{stroke:none!important}

/* one mark per card - kill the small duplicate for good */
.tpgames .tpg-grid .tpg-item.tpg-item .tpg-mark,
#tpgames .tpg-item .tpg-mark,
.tpg-item.tpg-item.tpg-item .tpg-mark{display:none!important;width:0!important;height:0!important}

/* ============================================================
   PIPS — dominoes on a region board. Ink, orange, warm greys only.
   ============================================================ */
.tpp-hud{display:flex!important;align-items:center!important;justify-content:center!important;
 gap:22px!important;margin:0 0 12px!important;
 font:700 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
 letter-spacing:1.6px!important;text-transform:uppercase!important;color:#8b8781!important}
.tpp-hud b,.tpp-time{color:#141416!important;font-variant-numeric:tabular-nums!important}
.tpp-board{position:relative!important;margin:0 auto!important}
.tpp-cell{position:absolute!important;box-sizing:border-box!important;border-radius:6px!important;
 background:#efece6!important;border:1.5px dashed rgba(20,20,22,.22)!important;
 display:flex!important;align-items:center!important;justify-content:center!important;
 cursor:pointer!important;transition:background .15s ease!important}
.tpp-cell:hover{background:#e6e2da!important}
.tpp-cell.part{background:#e9e5dc!important;border-style:solid!important}
.tpp-cell.ok{background:#e4e8e2!important;border-color:rgba(20,20,22,.3)!important;border-style:solid!important}
.tpp-cell.bad{background:#fdece7!important;border-color:#9a813c!important;border-style:solid!important}
.tpp-cell.full{background:#fff!important;border:1.5px solid #141416!important}
.tpp-v{font:700 22px/1 "Iowan Old Style",Georgia,serif!important;color:#141416!important}
.tpp-tag{position:absolute!important;z-index:3!important;width:26px!important;height:26px!important;
 display:flex!important;align-items:center!important;justify-content:center!important;
 border-radius:6px!important;transform:rotate(45deg)!important;
 background:#141416!important;color:#fff!important;
 font:700 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important}
.tpp-tag > *{transform:rotate(-45deg)!important}
.tpp-tag.ok{background:#c4ab67!important}
.tpp-tag.bad{background:#9a813c!important}

.tpp-tray{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;
 gap:8px!important;margin:16px auto 0!important;max-width:520px!important}
.tpp-t{padding:0!important;border:1.5px solid rgba(20,20,22,.2)!important;border-radius:8px!important;
 background:#fff!important;cursor:pointer!important;line-height:0!important}
.tpp-t.on{border-color:#c4ab67!important;box-shadow:0 0 0 2px rgba(196,171,103,.25)!important}
.tpp-t svg{display:block!important;width:72px!important;height:36px!important}
.tpp-t.v svg{width:36px!important;height:72px!important}
.tpp-body{fill:#fff!important;stroke:none!important}
.tpp-pip circle{fill:#141416!important}
.tpp-split{stroke:rgba(20,20,22,.28)!important;stroke-width:3!important}
.tpp-ctrl{justify-content:center!important}
.tpsh-pips{position:relative!important;display:flex!important;justify-content:center!important;
 gap:4px!important;margin:14px 0 4px!important}
.tpsh-pc{width:52px!important;height:52px!important;display:flex!important;align-items:center!important;
 justify-content:center!important;border-radius:6px!important;background:#fff!important;
 border:1.5px solid #141416!important;
 font:700 20px/1 "Iowan Old Style",Georgia,serif!important;color:#141416!important}
.tpsh-ptag{position:absolute!important;right:calc(50% - 60px)!important;bottom:-9px!important;
 width:24px!important;height:24px!important;display:flex!important;align-items:center!important;
 justify-content:center!important;border-radius:5px!important;transform:rotate(45deg)!important;
 background:#c4ab67!important;color:#fff!important;
 font:700 10px/1 -apple-system,Helvetica,Arial,sans-serif!important}

/* ============================================================
   GAMES INDEX — scattered, not a table of boxes.
   No dividers. Four columns, each on its own baseline, mark sizes
   varying so the eye moves across the page instead of down a grid.
   ============================================================ */
.tpgames .tpg-grid{border-top:0!important;column-gap:34px!important;row-gap:0!important;
 padding-top:8px!important}
.tpgames .tpg-grid .tpg-item.tpg-item{
 border:0!important;border-left:0!important;border-right:0!important;
 padding:0 0 64px 0!important;background:none!important}
/* each column sits on a different baseline */
.tpgames .tpg-grid .tpg-item:nth-child(4n+1){margin-top:0!important}
.tpgames .tpg-grid .tpg-item:nth-child(4n+2){margin-top:56px!important}
.tpgames .tpg-grid .tpg-item:nth-child(4n+3){margin-top:22px!important}
.tpgames .tpg-grid .tpg-item:nth-child(4n+4){margin-top:78px!important}
/* mark sizes alternate so no two neighbours match */
.tpgames .tpg-item.tpg-item .tpg-art svg{width:104px!important;height:104px!important}
.tpgames .tpg-grid .tpg-item:nth-child(4n+2) .tpg-art svg{width:88px!important;height:88px!important}
.tpgames .tpg-grid .tpg-item:nth-child(4n+3) .tpg-art svg{width:118px!important;height:118px!important}
.tpgames .tpg-grid .tpg-item:nth-child(4n+4) .tpg-art svg{width:80px!important;height:80px!important}
.tpgames .tpg-item.tpg-item .tpg-art{padding:22px 0 0!important;justify-content:flex-start!important}
.tpgames .tpg-item .tpg-n{font-size:19px!important}
.tpgames .tpg-item .tpg-d{max-width:22ch!important}
.tpgames .tpg-item::after{content:"PLAY"!important;display:block!important;
 margin-top:16px!important;
 font:700 9.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
 letter-spacing:2.2px!important;color:#8b8781!important;padding-top:0!important}
.tpgames .tpg-item:hover::after{color:#876c22!important}
.tpgames .tpg-item .tpg-art svg{transition:transform .5s cubic-bezier(.2,.6,.2,1)!important}
.tpgames .tpg-item:hover .tpg-art svg{transform:translateY(-6px) rotate(-3deg)!important}

/* ============================================================
   CRISP — line art should not blur
   ============================================================ */
.tpg-art svg,.tpc-art svg,.tpsh-icon svg,.tpgh-t svg{
 shape-rendering:geometricPrecision!important;
 image-rendering:auto!important}   /* 2026-09-22: -webkit-optimize-contrast renders vector art
   with nearest-neighbour edges on iOS - the "pixelated" puzzle previews. Vectors never need it. */
.tpg-art svg *,.tpsh-icon svg *,.tpgh-t svg *{stroke-linejoin:round!important;stroke-linecap:round!important}
.tpl-board,.tps-grid,.tpm-grid,.tpp-board,.tpb-comb,.tpc2-box{
 -webkit-font-smoothing:antialiased!important;transform:translateZ(0)!important}
.tpg-card{-webkit-font-smoothing:antialiased!important;
 text-rendering:optimizeLegibility!important}

/* banner tiles: real variety, a slight tilt, crisp edges */
.tpgh-t{transform:rotate(var(--tilt,0deg))!important;
 animation:tpghfloat2 var(--dur,9s) ease-in-out infinite!important}
@keyframes tpghfloat2{
 0%,100%{transform:rotate(var(--tilt,0deg)) translateY(0)}
 50%    {transform:rotate(var(--tilt,0deg)) translateY(-13px)}}
.tpgh-t{background:#eae7e1!important;box-shadow:0 8px 26px rgba(20,20,22,.07)!important;
 border-radius:22%!important}

/* ============================================================
   THE MARKS — one drawing standard
   96-unit ink box inside a 120 viewBox, 8-unit stroke, round joins.
   Stroke is held at a fixed screen weight so a rescaled mark never
   reads heavier or lighter than its neighbour.
   ============================================================ */
.tpg-art svg .mk,.tpc-art svg .mk,.tpsh-icon svg .mk,.tpgh-t svg .mk,
.tpg-art svg .pth2,.tpsh-icon svg .pth2,.tpgh-t svg .pth2{
 fill:none!important;stroke-linecap:round!important;stroke-linejoin:round!important}
.tpg-art svg .no,.tpsh-icon svg .no,.tpgh-t svg .no{stroke:none!important}
.tpg-art svg .lg{text-anchor:middle!important;dominant-baseline:central!important;
 font:700 30px/1 "Iowan Old Style",Georgia,serif!important;fill:#141416!important}
.tpg-art svg .f3{fill:rgba(20,20,22,.22)!important}
/* one stroke weight per context */
.tpgames .tpg-art svg .mk,.tpgames .tpg-art svg .pth2{stroke-width:3.4px!important}
.tpsh-icon svg .mk,.tpsh-icon svg .pth2{stroke-width:4.6px!important}
.tpgh-t svg .mk,.tpgh-t svg .pth2{stroke-width:3.2px!important}

/* ============================================================
   GAMES INDEX — back on the rule. Four columns, one baseline.
   Every card is the same shape:
     title   row 1, top-aligned
     line    row 2, fixed 44px so descriptions of 1 or 2 lines still line up
     mark    row 3, fixed 132px box, marks optically centred in it
     PLAY    row 4, on one line across the whole set
   ============================================================ */
.tpgames .tpg-grid{display:grid!important;grid-template-columns:repeat(4,1fr)!important;
 column-gap:34px!important;row-gap:56px!important;
 border-top:1px solid rgba(20,20,22,.12)!important;padding-top:30px!important}
.tpgames .tpg-grid .tpg-item.tpg-item{
 display:grid!important;grid-template-rows:auto 44px 132px auto!important;
 margin:0!important;padding:0!important;border:0!important;background:none!important;
 align-content:start!important}
.tpgames .tpg-grid .tpg-item .tpg-txt{display:contents!important}
.tpgames .tpg-grid .tpg-item .tpg-n{grid-row:1!important;margin:0 0 8px!important;
 font:700 19px/1.2 "Iowan Old Style",Georgia,serif!important;color:#141416!important}
.tpgames .tpg-grid .tpg-item .tpg-d{grid-row:2!important;margin:0!important;max-width:23ch!important;
 font:400 13.5px/1.42 "Iowan Old Style",Georgia,serif!important;color:#5a5750!important}
.tpgames .tpg-grid .tpg-item .tpg-art{grid-row:3!important;margin:0!important;padding:0!important;
 display:flex!important;align-items:center!important;justify-content:flex-start!important;
 height:132px!important}
/* one size for every mark, no exceptions */
.tpgames .tpg-grid .tpg-item.tpg-item .tpg-art svg,
.tpgames .tpg-grid .tpg-item:nth-child(4n+2) .tpg-art svg,
.tpgames .tpg-grid .tpg-item:nth-child(4n+3) .tpg-art svg,
.tpgames .tpg-grid .tpg-item:nth-child(4n+4) .tpg-art svg{
 width:112px!important;height:112px!important}
.tpgames .tpg-grid .tpg-item::after{grid-row:4!important;margin:14px 0 0!important}
/* the stagger is gone - every column starts on the same line */
.tpgames .tpg-grid .tpg-item:nth-child(4n+1),
.tpgames .tpg-grid .tpg-item:nth-child(4n+2),
.tpgames .tpg-grid .tpg-item:nth-child(4n+3),
.tpgames .tpg-grid .tpg-item:nth-child(4n+4){margin-top:0!important}

/* ============================================================
   BANNER — one wave. Tiles ride a shallow arc away from the type
   and back up the far side, float on a staggered 10s cycle.
   ============================================================ */
.tpgh-in{height:430px!important}
.tpgh-t{--dur:10s!important;
 background:#eae7e1!important;border-radius:24%!important;
 box-shadow:0 10px 30px rgba(20,20,22,.075)!important;
 will-change:transform!important}
@keyframes tpghfloat2{
 0%   {transform:rotate(var(--tilt,0deg)) translateY(0)}
 50%  {transform:rotate(calc(var(--tilt,0deg) * 0.55)) translateY(-15px)}
 100% {transform:rotate(var(--tilt,0deg)) translateY(0)}}
/* the type sits in clear air */
.tpgh-say{padding:0 40px!important}
.tpgh h1{font-size:62px!important;letter-spacing:-0.5px!important}
.tpgh-say p{margin-top:2px!important}
@media (max-width:1100px){
 .tpgh-in{height:380px!important}
 .tpgh-t{transform:scale(.78) rotate(var(--tilt,0deg))!important}
}

/* the constellation runs to the edges, so the band clips instead of the tiles */
.tpgh{overflow:hidden!important}
.tpgh-in{height:auto!important;min-height:360px!important;overflow:visible!important;
 display:flex!important;align-items:center!important}
.tpgh-t{opacity:.97!important}


/* ============================================================
   ONE PAGE SYSTEM — every page, every section, the same rules.
   container   1348 max, 46 gutter  -> every title starts on x=46 at 1440
   title       24px / 700 serif, ink
   frame       first line 47 below the top rule, last line 47 above the bottom
   ============================================================ */
.mobx>section>.tpsec-hd,.tpg-in,.tpmore-in,.tpsay-in,.tpgh-in,
.mobx>div.pbody>.wrap,.arch>.wrap,.feature>.wrap{
 max-width:1348px!important;margin-left:auto!important;margin-right:auto!important;
 padding-left:46px!important;padding-right:46px!important;box-sizing:border-box!important}

/* one section title, everywhere */
.mobx>section>.tpsec-hd h2,.tpg-hd h2,.tpmore-hd h2,.tpsay-hd h2,
.tpgames .tpg-hd h2,.arch h3,.pbody h2,.pbody>.wrap>h2{
 margin:0!important;
 font:700 24px/1.15 "Iowan Old Style",Georgia,"Times New Roman",Times,serif!important;
 color:#141416!important;letter-spacing:0!important;text-transform:none!important}
/* the strap beside a section title */
.tpg-hd span,.tpmore-hd span,.tpsay-hd span,.tpg-hd>a{
 font:italic 400 15px/1.2 "Iowan Old Style",Georgia,serif!important;color:#5a5750!important}

/* section header block: same shape on every page */
.tpsec-hd,.tpg-hd,.tpmore-hd,.tpsay-hd{
 display:flex!important;align-items:baseline!important;justify-content:space-between!important;
 gap:16px!important;margin:0 0 26px!important;padding:0 0 14px!important;
 border-bottom:1px solid rgba(20,20,22,.12)!important}

/* one gutter, applied once. Inner wrappers carry the width, the section
   carries the gutter, so nothing is padded twice. */
.mobx>section,.tpgames,.tpgh,.mobx>div.pbody,.arch,.feature{
 padding-left:46px!important;padding-right:46px!important;box-sizing:border-box!important}
.mobx>section>.tpsec-hd,.tpg-in,.tpmore-in,.tpsay-in,.tpgh-in,
.mobx>div.pbody>.wrap,.arch>.wrap,.feature>.wrap{
 max-width:1348px!important;margin-left:auto!important;margin-right:auto!important;
 padding-left:0!important;padding-right:0!important}
/* the feature page centres its own copy - bring it onto the same left edge */
.pbody>.wrap,.pbody>.wrap>*{text-align:left!important}
.pbody h2,.pbody>.wrap>h2{text-align:left!important}

/* the Get Featured page uses its own wrapper - same rail as everything else */
.pbody>.fwrap,.pbody>.arcwrap{max-width:1348px!important;margin:0 auto!important;
 padding-left:0!important;padding-right:0!important;box-sizing:border-box!important}
.pbody .pmast,.mobx>.pmast{max-width:1348px!important;margin:0 auto!important;
 padding-left:46px!important;padding-right:46px!important;box-sizing:border-box!important;
 text-align:left!important}

/* archive: the section owns the frame, the wrapper owns nothing */
section.pbody.arcpage>div.awrap.awrap{padding-top:0!important;padding-bottom:0!important;
 margin-top:0!important;margin-bottom:0!important}
section.pbody.arcpage>div.awrap.awrap>*:first-child{margin-top:0!important}
section.pbody.arcpage>div.awrap.awrap>*:last-child{margin-bottom:0!important}
section.pbody>div.fwrap.fwrap{padding-top:0!important;padding-bottom:0!important}


/* the games band is also set by an inline block on each page - out-rank it */
.mobx section.tpgames.tpgames.tpgames,
section.tpgames.tpgames.tpgames{padding-top:46.00px!important;padding-bottom:47.00px!important}


/* the end-of-article block: the section owns the frame */
.mobx>div.aend.aend>*{padding-top:0!important;padding-bottom:0!important}
.mobx>div.aend.aend>*:first-child{margin-top:0!important}
.mobx>div.aend.aend>*:last-child{margin-bottom:0!important}


/* ============================================================
   BANNER v3 — the tiles are the banner. Flat, big, cropped at the
   edges; the type sits under them rather than fighting them.
   ============================================================ */
.tpgh-in{min-height:520px!important;height:auto!important;position:relative!important;
 display:block!important;padding-top:0!important;padding-bottom:0!important}
.tpgh-t{box-shadow:none!important;background:#e9e6e0!important;border-radius:21%!important;
 opacity:1!important}
.tpgh-t svg{width:64%!important;height:64%!important}
.tpgh-say{position:absolute!important;left:0!important;right:0!important;
 top:50%!important;transform:translateY(-50%)!important;
 height:auto!important;z-index:3!important;pointer-events:none!important}
.tpgh h1{font-size:48px!important;margin:0 0 8px!important}
.tpgh-eyebrow{margin:0 0 10px!important}
.tpgh-say p{font-size:16px!important}
@media (max-width:1100px){
 .tpgh-in{min-height:360px!important}
 .tpgh h1{font-size:34px!important}
}




/* ==================================================================
   THE FRAME  —  one rule, every page, every site.  Measured against
   varietypartners: banner 411, header 56, gutter 46.
   Nothing in here is per-page. Nothing in here changes.
   ================================================================== */
:root{--gut:max(46px, calc((100% - 1348px)/2));--bh:411px;--band:524px;--frame:47px;
 --fix-mast:3.50px;--fix-pmast:5.14px;--fix-art:0.82px;--fix-tile:0px}

/* ---- 1. every head banner is the same band ---- */
.mobx div.mast.mast.mast, .mobx div.pmast.pmast.pmast,
.mobx section.tpgh.tpgh.tpgh, .mobx div.art.art.art{
 height:var(--bh)!important; min-height:var(--bh)!important; max-height:var(--bh)!important;
 box-sizing:border-box!important; width:100%!important; max-width:none!important;
 margin-left:0!important; margin-right:0!important;
 padding-top:0!important; padding-bottom:0!important;
 padding-left:var(--gut)!important; padding-right:var(--gut)!important;
 overflow:hidden!important; position:relative!important}

.mobx div.mast.mast.mast, .mobx div.pmast.pmast.pmast, .mobx div.art.art.art{
 display:flex!important; flex-direction:column!important;
 justify-content:center!important; align-items:stretch!important}
.mobx div.pmast.pmast *, .mobx div.art.art *{text-align:left!important}
.mobx div.pmast.pmast>*, .mobx div.art.art>*{
 max-width:100%!important;margin-left:0!important;margin-right:0!important;
 padding-left:0!important;padding-right:0!important}
.mobx div.pmast.pmast>p{max-width:66ch!important}
.mobx div.art.art>.crumb{margin-top:0!important}
.mobx div.art.art>*:last-child{margin-bottom:0!important}
.mobx div.pmast.pmast.pmast.pmast{padding-top:var(--fix-pmast,0px)!important}
.mobx div.art.art.art.art{padding-top:var(--fix-art,0px)!important}
.mobx div.mast.mast.mast.mast{padding-top:var(--fix-mast,0px)!important}

/* the games banner is the same band; its tiles live inside it */
.mobx section.tpgh.tpgh.tpgh{display:block!important}
.mobx section.tpgh>.tpgh-in{height:100%!important;max-width:1348px!important;margin:0 auto!important;min-height:0!important;max-height:100%!important;
 width:100%!important;max-width:none!important;margin:0!important;padding:0!important;
 position:relative!important;overflow:hidden!important}
.mobx .tpgh-tiles{position:absolute!important;inset:0!important;overflow:hidden!important;
 transform:translateY(var(--fix-tile,0px))!important}
.mobx .tpgh-t{position:absolute!important;width:auto!important}
.mobx .tpgh h1{font-size:44px!important}
.mobx .tpgh-say{left:0!important;right:0!important;text-align:left!important;
 padding-left:0!important;padding-right:0!important;
 align-items:flex-start!important;display:flex!important;flex-direction:column!important}
.mobx .tpgh-say>*{margin-left:0!important;margin-right:0!important;text-align:left!important;
 padding-left:0!important;padding-right:0!important;align-self:flex-start!important}

/* ---- 2. one gutter. start line 46, end line 46. every page. ---- */
.mobx section.cover.cover.cover, .mobx section.tpmore.tpmore.tpmore,
.mobx section.tpsay.tpsay.tpsay, .mobx section.tpgames.tpgames.tpgames,
.mobx section.pbody.pbody.pbody, .mobx div.mast.mast.mast, .mobx div.pmast.pmast.pmast,
.mobx div.art.art.art, .mobx div.abody.abody.abody, .mobx div.aend.aend.aend,
.mobx section.tpgh.tpgh.tpgh{
 padding-left:var(--gut)!important; padding-right:var(--gut)!important;
 box-sizing:border-box!important}
.mobx section.cover.cover>*, .mobx section.tpmore.tpmore>*, .mobx section.tpsay.tpsay>*,
.mobx section.tpgames.tpgames>*, .mobx section.pbody.pbody>*,
.mobx div.abody.abody>*, .mobx div.aend.aend>*{
 padding-left:0!important; padding-right:0!important;
 margin-left:0!important; margin-right:0!important; max-width:none!important}
.mobx section.pbody.arcpage>div.awrap{width:100%!important}

/* ---- 3. every body section is the same size as the next ---- */
section.cover.cover.cover, section.tpmore.tpmore.tpmore, section.tpsay.tpsay.tpsay,
section.pbody.pbody.pbody{
 min-height:var(--band)!important; box-sizing:border-box!important}
section.pbody.pbody.pbody{display:flex!important;flex-direction:column!important;
 align-items:stretch!important}
section.pbody.pbody>.fwrap, section.pbody.pbody>.awrap, section.pbody.pbody>.wrap{
 flex:1 1 auto!important}
section.pbody.pbody>.fwrap>*{align-self:stretch!important}
section.tpgames.tpgames.tpgames{
 min-height:var(--band)!important;max-height:none!important;box-sizing:border-box!important}
/* the band owns the frame; the wrapper stretches so the content fills it,
   first line on the start line, last line on the end line */
section.tpmore.tpmore.tpmore, section.tpsay.tpsay.tpsay, section.tpgames.tpgames.tpgames{
 display:flex!important;flex-direction:column!important;align-items:stretch!important}
section.tpmore.tpmore>.tpmore-in, section.tpsay.tpsay>.tpsay-in,
section.tpgames.tpgames>.tpg-in{
 flex:1 1 auto!important; min-height:0!important; height:auto!important;
 box-sizing:border-box!important; display:flex!important; flex-direction:column!important;
 justify-content:space-between!important}
section.tpgames.tpgames>.tpg-in>.tpg-grid{padding-top:0!important}
/* a card stretched by its grid fills to the end line, it does not float at the top */
section.tpmore.tpmore .tpmore-grid>.tpmore-c{display:flex!important;flex-direction:column!important;
 justify-content:space-between!important}
section.tpsay.tpsay>.tpsay-in>.tpsay-body{flex:1 1 auto!important;
 display:flex!important;flex-direction:column!important;justify-content:space-between!important}
section.tpsay.tpsay .tpsay-body>*{align-self:stretch!important}
.mobx section.cover>.cover-img{align-self:stretch!important}

/* the featured wrap is a box: its edge IS the ink, so the band pads it directly */



/* ---- the puzzles band obeys the same rule as every other band.
       Eight cards do not fit in one band, so the band carries four and
       the rest arrive on the rail. No taller band, no exception. ---- */
section.tpgames.tpgames .tpg-grid{
 display:flex!important;flex-wrap:nowrap!important;
 grid-template-columns:none!important;
 overflow-x:auto!important;overflow-y:hidden!important;
 scroll-snap-type:x mandatory!important;scroll-behavior:smooth!important;
 column-gap:34px!important;row-gap:0!important;
 scrollbar-width:none!important;-ms-overflow-style:none!important;
 padding-bottom:0!important;flex:0 0 auto!important;align-items:stretch!important}
section.tpgames.tpgames .tpg-grid::-webkit-scrollbar{display:none!important}
section.tpgames.tpgames .tpg-grid{column-gap:17px!important}
section.tpgames.tpgames .tpg-grid>.tpg-item{
 flex:0 0 calc((100% - 102px)/4)!important;max-width:calc((100% - 102px)/4)!important;
 margin-top:0!important;scroll-snap-align:start!important}
section.tpgames.tpgames .tpg-grid>.tpg-item+.tpg-item{
 border-left:1px solid rgba(20,20,22,.16)!important;padding-left:17px!important}
section.tpgames.tpgames[data-shelf="home"] .tpg-grid>.tpg-item{
 flex:0 0 calc((100% - 68px)/3)!important;max-width:calc((100% - 68px)/3)!important}

/* the rail control lives on the section head, on the end line */
.tpg-hd{display:flex!important;align-items:flex-end!important;
 justify-content:space-between!important;gap:20px!important}
.tpg-nav{display:flex!important;gap:8px!important;flex:0 0 auto!important;align-self:center!important}
.tpg-nav button{width:34px!important;height:34px!important;border-radius:50%!important;
 border:1px solid rgba(20,20,22,.24)!important;background:transparent!important;
 color:#141416!important;font:400 17px/1 -apple-system,system-ui,sans-serif!important;
 cursor:pointer!important;display:flex!important;align-items:center!important;
 justify-content:center!important;padding:0!important;transition:.15s}
.tpg-nav button:hover{background:#141416!important;color:#fff!important;border-color:#141416!important}
.tpg-nav button[disabled]{opacity:.28!important;cursor:default!important;background:transparent!important;
 color:#141416!important;border-color:rgba(20,20,22,.24)!important}

/* the More grid keeps its three columns wherever it sits */
section.tpmore.tpmore .tpmore-grid{display:grid!important;
 grid-template-columns:repeat(3,1fr)!important;column-gap:34px!important;row-gap:0!important;
 align-items:stretch!important;flex:1 1 auto!important}
/* the rail fills the band: the cards reach the end line, they do not float */
section.tpgames.tpgames>.tpg-in>.tpg-grid{flex:1 1 auto!important;align-items:stretch!important}
section.tpgames.tpgames>.tpg-in>.tpg-grid>.tpg-item{align-self:stretch!important;height:auto!important;
 display:flex!important;flex-direction:column!important;justify-content:space-between!important;
 align-items:flex-start!important;text-align:left!important}
section.tpgames.tpgames .tpg-item .tpg-n{text-align:left!important;align-self:flex-start!important;
 margin:0 0 6px!important}
section.tpgames.tpgames .tpg-item .tpg-d{text-align:left!important;align-self:flex-start!important;
 margin:0!important}

section.tpgames.tpgames .tpg-item>.tpg-art{flex:1 1 auto!important;display:flex!important;
 align-items:center!important;justify-content:center!important;min-height:0!important}
section.tpgames.tpgames .tpg-item>.tpg-art svg{height:100%!important;width:auto!important;max-height:100%!important}
section.tpgames.tpgames .tpg-item>.tpg-art{margin-bottom:0!important;padding-bottom:0!important}

/* the archive rests in one band; the list opens from there */
section.pbody.arcpage.arcpage>.awrap{padding-top:0!important;padding-bottom:0!important;
 margin-top:0!important;margin-bottom:0!important;max-width:none!important;
 height:calc(var(--band) - 94px)!important;
 display:flex!important;flex-direction:column!important;
 justify-content:flex-start!important}
section.pbody.arcpage.arcpage>.awrap>.clist{flex:1 1 auto!important;min-height:0!important;
 overflow:hidden!important}

section.pbody.arcpage.arcpage{height:var(--band)!important;max-height:var(--band)!important;
 overflow:hidden!important;padding-top:47px!important;padding-bottom:47px!important}
section.pbody.arcpage.arcpage.open{height:auto!important;max-height:none!important;
 overflow:visible!important}
section.pbody.arcpage.arcpage .clist{overflow:hidden!important}
section.pbody.arcpage.arcpage.open .clist{max-height:none!important}

/* ---- 4. one footer, all forty pages ---- */
footer.tpfoot.tpfoot{padding-top:0!important;padding-bottom:0!important;
 height:153px!important;min-height:153px!important;box-sizing:border-box!important;overflow:hidden!important}
.mobx footer.tpfoot>.tpf-in{height:153px!important;padding-left:var(--gut)!important;padding-right:var(--gut)!important;
 box-sizing:border-box!important;
 padding-top:var(--foot-t,34px)!important;padding-bottom:var(--foot-b,34px)!important}

p.abacklink{margin:38px 0 0!important;padding:0!important}
p.abacklink a.backbtn{display:inline-block!important}

/* ---- 5. the end-of-article block is one fixed height everywhere ---- */
.mobx div.aend.aend.aend{height:106px!important;min-height:106px!important;
 box-sizing:border-box!important;
 display:flex!important;flex-direction:column!important;justify-content:center!important;
 padding-top:0!important;padding-bottom:0!important}



/* ---- 6. lines: the band rules stay, the stray greys go ---- */
/* the bar that shot out sideways from every section title.
   The pages declare it inline at (0,3,2), so these are written heavier. */
.tpsec-hd.tpsec-hd.tpsec-hd.tpsec-hd.tpsec-hd::after,
.tpsec-hd.tpsec-hd.tpsec-hd.tpsec-hd.tpsec-hd::before,
.tpmore-hd.tpmore-hd.tpmore-hd.tpmore-hd.tpmore-hd::after,
.tpmore-hd.tpmore-hd.tpmore-hd.tpmore-hd.tpmore-hd::before,
.tpg-hd.tpg-hd.tpg-hd.tpg-hd.tpg-hd::after,
.tpg-hd.tpg-hd.tpg-hd.tpg-hd.tpg-hd::before,
.tpsay-bhd.tpsay-bhd.tpsay-bhd.tpsay-bhd.tpsay-bhd::after,
.tpsay-bhd.tpsay-bhd.tpsay-bhd.tpsay-bhd.tpsay-bhd::before{
 content:none!important;display:none!important;background:none!important;
 width:0!important;height:0!important}

/* the bar that shot out sideways from every section title */
.mobx section.cover>.tpsec-hd::after, .tpg-hd.tpg-hd.tpg-hd::after,
.tpsay .tpsec-hd::after, .tpmore-hd.tpmore-hd.tpmore-hd::before,
section.cover.cover .tpsec-hd::after, section.tpsay.tpsay .tpsec-hd::after,
.tpsec-hd::before, .tpsec-hd::after,
.tpmore-hd::before, .tpmore-hd::after,
.tpg-hd::before, .tpg-hd::after,
.tpsay-bhd::before, .tpsay-bhd::after,
.mobx .tpsec-hd::before, .mobx .tpsec-hd::after,
.mobx .tpmore-hd::before, .mobx .tpmore-hd::after,
.mobx .tpg-hd::before, .mobx .tpg-hd::after{
 content:none!important;display:none!important;background:none!important}
/* the rule that trailed off the section titles */
.tpsec-hd, .tpmore-hd, .tpg-hd, .tpsay-bhd, .tpg-hd.tpg-hd,
.mobx .tpsec-hd, .mobx .tpmore-hd, .mobx .tpg-hd, .mobx .tpsay-bhd{
 border-bottom:0!important}
/* the second rule above the puzzle cards - the band already has one */
.tpg-grid, .mobx .tpg-grid, section.tpgames.tpgames .tpg-grid{border-top:0!important}
/* the box drawn round the cover picture */
.cover-img, .mobx .cover-img, section.cover.cover>.cover-img{border:0!important}
/* the vertical dividers between the reading cards */
.tpmore-c, .mobx .tpmore-c, a.tpmore-c.tpmore-c,
.tpmore-grid a.tpmore-c.tpmore-c.tpmore-c, section.tpmore.tpmore .tpmore-grid>.tpmore-c{
 border-left:0!important;border-right:0!important}
/* the doubled hairline under the nav - one line, not two */
.mobx>header, header.header, .mobx header{border-bottom:0!important}

.tps-skip #tpsplash, .tps-skip .tpsplash{display:none!important}

/* tpq-splash: the nameplate sits on open sky, never on the city.
   auto 160% is height-relative, so the framing is identical at every window height. */
#tpsplash.tpsplash.tpsplash, .tpsplash.tpsplash.tpsplash{
 background-size:auto max(120%, 1080px)!important;
 background-position:50% 0%!important;
 background-repeat:no-repeat!important}

/* tpq-title: the banner, measured off varietypartners and matched exactly.
   VP's own numbers, identical on work / our-brands / contact:
     band 411, padding 31 / 31, gutter 46, top-anchored (not centred)
     eyebrow  y 31.0   14.3 / 23.309  w700  ls  3.289   margin-top  0
     h1       y 72.3   42.8 / 47.08   w600  ls -0.8132  margin-top 17.976
     sub      y120.9   25.9368 / 33.7178 w400 ls normal margin-top  1.556
     rule     y186.4   70 x 4, orange                    margin-top 20
     lead     y206.4   18.2 / 29.12   w400  ls normal    margin-top 16
   Sizes and spacing are VP's. The typefaces stay The Position's. */
:root{--ptitle:54px;--ptitle-lh:1.1;--ptitle-ls:-0.019em;
      --peyebrow:13px;--peyebrow-lh:21.19px;--peyebrow-ls:2.99px;
      --psub:24px;--psub-lh:31.2px;
      --plead:18.2px;--plead-lh:29.12px;
      --tp-serif:"Iowan Old Style",Georgia,"Times New Roman",Times,serif;
      --tp-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}

/* the band is top-anchored on 31, the way VP's is */
.mobx div.pmast.pmast.pmast.pmast, .mobx section.tpgh.tpgh.tpgh.tpgh,
.mobx div.art.art.art.art{
 justify-content:center!important;
 padding-top:31px!important;padding-bottom:31px!important;
 display:flex!important;flex-direction:column!important;align-items:stretch!important;
 text-align:left!important}
.mobx section.tpgh.tpgh.tpgh.tpgh>.tpgh-in{
 display:block!important;height:auto!important;min-height:0!important;
 max-width:none!important;width:100%!important;margin:0!important;padding:0!important;
 position:static!important;overflow:visible!important}
.mobx section.tpgh .tpgh-say.tpgh-say.tpgh-say{position:static!important;transform:none!important;
 height:auto!important;display:block!important;padding:0!important;margin:0!important;
 width:100%!important;max-width:none!important;text-align:left!important;
 left:auto!important;right:auto!important;top:auto!important;align-items:flex-start!important}
.mobx section.tpgh .tpgh-say>*{margin-left:0!important;align-self:flex-start!important;
 text-align:left!important}

.mobx div.pmast.pmast.pmast .eyebrow, .mobx section.tpgh.tpgh.tpgh .tpgh-eyebrow,
.mobx div.art.art.art .crumb{
 display:block!important;
 font-family:var(--tp-sans)!important;
 font-size:var(--peyebrow)!important;line-height:var(--peyebrow-lh)!important;
 font-weight:700!important;letter-spacing:var(--peyebrow-ls)!important;
 text-transform:uppercase!important;margin:0!important}

.mobx div.art.art.art h1, .mobx div.pmast.pmast.pmast h1,
.mobx section.tpgh.tpgh.tpgh h1, .tpgh.tpgh.tpgh h1{
 font-family:var(--tp-serif)!important;
 font-size:var(--ptitle)!important;line-height:var(--ptitle-lh)!important;
 font-weight:600!important;letter-spacing:var(--ptitle-ls)!important;
 margin:17.976px 0 0!important;text-align:left!important}

.mobx .pm-sub{display:block!important;
 font-family:var(--tp-serif)!important;
 font-size:var(--psub)!important;line-height:var(--psub-lh)!important;
 font-weight:400!important;letter-spacing:normal!important;color:#4a4a52!important;
 margin:1.556px 0 0!important}

.mobx .pm-rule{display:block!important;width:70px!important;height:4px!important;
 background:#c4ab67!important;border-radius:0!important;margin:31.8px 0 0!important;
 font-size:0!important;line-height:0!important;padding:0!important}

.mobx div.pmast.pmast.pmast>p, .mobx section.tpgh.tpgh.tpgh .tpgh-say p,
.mobx div.art.art.art .dek{
 font-family:var(--tp-sans)!important;
 font-size:var(--plead)!important;line-height:var(--plead-lh)!important;
 font-weight:400!important;letter-spacing:normal!important;
 margin:16px 0 0!important}

/* the puzzles band carries a 1px rule on top; take it out of the 31 so the
   eyebrow lands on the same line as it does on the other two */
.mobx section.tpgh.tpgh.tpgh.tpgh{padding-top:30px!important}

/* the puzzles banner carries no picture */
.mobx .tpgh-tiles{display:none!important}

/* tpq-rail-guard: no breakpoint may move the start line, at any width */
section.cover.cover.cover, section.tpmore.tpmore.tpmore, section.tpsay.tpsay.tpsay,
section.tpgames.tpgames.tpgames, section.pbody.pbody.pbody, section.tpgh.tpgh.tpgh,
div.mast.mast.mast, div.pmast.pmast.pmast, div.art.art.art,
div.abody.abody.abody, div.aend.aend.aend, footer.tpfoot>.tpf-in{
 padding-left:max(46px, calc((100% - 1348px)/2))!important;
 padding-right:max(46px, calc((100% - 1348px)/2))!important;
 box-sizing:border-box!important}
section.cover.cover>*, section.tpmore.tpmore>*, section.tpsay.tpsay>*,
section.tpgames.tpgames>*, section.pbody.pbody>*, div.abody.abody>*, div.aend.aend>*{
 max-width:none!important;margin-left:0!important;margin-right:0!important;
 padding-left:0!important;padding-right:0!important}


/* tpq-ground — ONE ground and ONE orange divide under EVERY banner.
   measured 2026-09-10: index mast was white, games tpgh was white with no rule,
   article art was transparent with no rule. all five now match archive. */
.mobx div.mast.mast.mast.mast,
.mobx div.pmast.pmast.pmast.pmast,
section.tpgh.tpgh.tpgh.tpgh,
.mobx div.art.art.art.art{
 background:#f4f3f1!important;
 border-bottom:3px solid #c4ab67!important}

/* tpq-foot — the rule under BACK TO TOP carries a trailing letter-space; JS strips it.
   the two marks are sized and placed from measured ink, not from their boxes. */
footer.tpfoot .tpf-top span.tpf-tail.tpf-tail{display:inline!important;letter-spacing:0!important;
 font:inherit!important;color:inherit!important;content:normal!important}


/* tpq-span — the stat stack, chosen 2026-09-11.
   Right aligned, ending on the page rail. NO vertical rules anywhere.
   The figure is the sub line exactly: 24px Iowan Old Style, 400, normal tracking. */
.mobx div.pmast.pmast.pmast, section.tpgh.tpgh.tpgh, .mobx div.art.art.art{position:relative!important}
aside.tp-rail.tp-rail{position:absolute!important;top:0!important;bottom:auto!important;
 display:block!important;text-align:right!important;z-index:2!important}
aside.tp-rail.tp-rail .tp-stem{display:none!important}
aside.tp-rail.tp-rail .tp-rh{display:block!important;text-align:right!important;
 /* the banner's eyebrow size, in grey: 16 / 26.4 / 700 / ls 2.5 - the same run
    as the orange line on the left. It was 13 / 21.19 / ls 2.99. */
 font:700 16px/26.4px var(--tp-sans)!important;letter-spacing:2.5px!important;
 text-transform:uppercase!important;color:#8b8781!important;white-space:nowrap!important;margin:0!important}
aside.tp-rail.tp-rail ul{display:flex!important;flex-direction:column!important;
 align-items:flex-end!important;list-style:none!important;margin:0!important;padding:0!important;
 width:100%!important}
aside.tp-rail.tp-rail li{display:block!important;margin:0!important;padding:0!important;
 border:0!important;text-align:right!important;width:auto!important;max-width:100%!important}
/* the figures and the words share ONE right edge. the pmast banners set text-align:left
   further down the tree, which left the figures staggered while the words stayed flush. */
aside.tp-rail.tp-rail .tp-fig{display:block!important;text-align:right!important;
 /* the sub line exactly: 22 / 30.14 serif. It was 24 / 31.2, from when the sub
    was 24 - the banner now copies Variety's 22 and the figures follow it. */
 font:400 22px/30.14px var(--tp-serif)!important;letter-spacing:normal!important;
 color:#141416!important;white-space:nowrap!important;margin:0!important}
aside.tp-rail.tp-rail .tp-lab{display:block!important;text-align:right!important;margin:0!important;
 /* the lead line exactly: 16 / 24 sans. It was 18.2 / 29.12. */
 font:400 16px/24px var(--tp-sans)!important;color:#4a4a52!important;white-space:nowrap!important}
@media(max-width:760px){aside.tp-rail.tp-rail{display:none!important}}
/* the home masthead is centred, so its publisher lockup keeps the single hanging line */
.mobx>.mast aside.tp-rail.tp-rail{width:auto!important;text-align:left!important}
.mobx>.mast aside.tp-rail.tp-rail .tp-rh{text-align:left!important;padding-left:26px!important;
 white-space:normal!important}
/* no vertical rule anywhere on the site, the home lockup included */
.mobx>.mast aside.tp-rail.tp-rail .tp-stem{display:none!important}
.mobx>.mast aside.tp-rail.tp-rail .tp-rh{padding-left:0!important}

/* tpq-mast — the home banner, rebuilt on the section pages' rule:
   eyebrow / wordmark / sub / orange rule / lead, centred, 17.5 between every part.
   The wordmark is 110 tall and the opening screen is pinned to it, so both match. */
.mobx>.mast .dmast{display:none!important}
.mobx>.mast .tpm{display:flex!important;flex-direction:column!important;align-items:center!important;
 text-align:center!important;width:100%!important;margin:0!important;padding:0!important}
.mobx>.mast .tpm .tpm-eyebrow{display:block!important;margin:0!important;
 font:700 13px/21.19px var(--tp-sans)!important;letter-spacing:2.99px!important;
 text-transform:uppercase!important;color:#8b8781!important;white-space:nowrap!important}
.mobx>.mast .tpm .dm-plate{display:block!important;height:110px!important;width:auto!important;
 max-width:none!important;margin:0!important;filter:none!important}
.mobx>.mast .tpm .tpm-sub{display:block!important;margin:0!important;
 font:400 24px/31.2px var(--tp-serif)!important;color:#4a4a52!important;white-space:nowrap!important}
.mobx>.mast .tpm .tpm-rule{display:block!important;margin:0!important;width:70px!important;height:4px!important;
 background:#c4ab67!important;font-size:0!important;line-height:0!important;flex:0 0 auto!important}
.mobx>.mast .tpm .tpm-lead{display:block!important;margin:0!important;max-width:none!important;
 font:400 18.2px/29.12px var(--tp-sans)!important;color:#4a4a52!important;
 /* the masthead used to sit on a photo, so a drop shadow was inherited here. it is paper now. */
 text-shadow:none!important;filter:none!important;background:none!important}
/* the publisher lockup on the home masthead, on the same 1px line as the section pages */
aside.tp-rail.tp-rail-home .tp-rh{line-height:1.63!important}
.mobx>.mast{position:relative!important}
/* the opening screen carries the wordmark only — the lockup belongs to the masthead */
#tpsplash .tps-div, #tpsplash .tps-kick, .tpsplash .tps-div, .tpsplash .tps-kick{display:none!important}
/* below 900 the phone masthead is its own thing (still to be done) — the desktop block
   is hidden rather than stacked on top of it */
@media(max-width:760px){.mobx>.mast .tpm{display:none!important}}  /* was 900: 761-900 had no banner at all */


/* tpq-splash — the opening screen was REMOVED 2026-09-17 at the client's
   request. The markup, the boot script and its two background blocks are all
   gone from index.html. Nothing here can bring it back; the .tpsplash rules
   further up are dead selectors, left in place rather than risk a knock-on. */
#tpsplash,.tpsplash{display:none!important}
html.tps-lock{overflow:auto!important}
/* tpq-splash */

/* tpq-home — the cleaned-up home page, agreed 2026-09-11.
   Numbers off the kickers, one title size everywhere, the publisher lockup gone,
   the puzzle link parked with the arrows, puzzle cards as name boxes. */

/* 1 · the kickers keep the words and lose the numbers */
.mobx section.cover.cover.cover .tpsec-hd.tpsec-hd h2::before{content:"This week"!important}
.mobx section.tpmore .tpmore-hd h2::before{content:"Reading"!important}
.mobx section.tpsay .tpsec-hd h2::before{content:"The brief"!important}
.mobx section.tpgames .tpg-hd h2::before{content:"Play"!important}

/* 2 · ONE title size on the home page. the section heads were already 24/26.4/-0.4;
       the article headline was 35 and the story cards were 18.5. they match now. */
.mobx section.cover.cover.cover > h2,
.mobx section.tpmore .tpmore-grid a.tpmore-c h3{
 font:700 24px/26.4px var(--tp-serif)!important;
 letter-spacing:-0.4px!important;
 color:#141416!important}

/* 3 · nothing hangs off the right of a centred masthead */
.mobx > .mast aside.tp-rail.tp-rail-home{display:none!important}

/* 4 · the link sits with the arrows instead of floating in the middle */
.mobx section.tpgames .tpg-hd{justify-content:flex-start!important;gap:20px!important}
.mobx section.tpgames .tpg-hd h2{margin-right:auto!important}
.mobx section.tpmore .tpmore-hd{justify-content:flex-start!important}
.mobx section.tpmore .tpmore-hd h2{margin-right:auto!important}

/* 5 · puzzle cards become name boxes: the name, one line, no picture.
       hiding the artwork left the old 322px card height behind, which is why the
       section had a 190px hole under the cards. the box is its content now. */
.mobx section.tpgames .tpg-grid{display:grid!important;
 grid-auto-flow:row!important;grid-auto-columns:auto!important;
 grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important;
 height:auto!important;overflow:visible!important;
 scroll-snap-type:none!important;transform:none!important}
.mobx section.tpgames .tpg-grid a.tpg-item{
 width:100%!important;min-width:0!important;max-width:none!important;
 flex:none!important;height:100%!important;
 display:flex!important;flex-direction:column!important;align-items:flex-start!important}
.mobx section.tpgames .tpg-hd .tpg-nav{display:none!important}
/* all eight, four across and two down, sized so the section still measures 524
   like every other one. nothing is hidden behind an arrow. */
.mobx section.tpgames .tpg-grid{grid-auto-rows:160px!important;align-content:start!important}
.mobx section.tpgames .tpg-grid a.tpg-item{
 padding:20px 20px 18px!important;overflow:hidden!important}
.mobx section.tpgames .tpg-grid a.tpg-item .tpg-n{
 font:700 20px/24px var(--tp-serif)!important;letter-spacing:-.3px!important}
.mobx section.tpgames .tpg-grid a.tpg-item .tpg-d{
 font:400 15px/22px var(--tp-sans)!important;color:#4a4a52!important;margin-top:8px!important}
.mobx section.tpgames .tpg-grid a.tpg-item{
 border:1px solid rgba(20,20,22,.14)!important;
 padding:26px 24px 24px!important;
 background:#fff!important;
 transition:border-color .15s ease!important}
.mobx section.tpgames .tpg-grid a.tpg-item:hover{border-color:#141416!important}
.mobx section.tpgames .tpg-grid a.tpg-item .tpg-art,
.mobx section.tpgames .tpg-grid a.tpg-item .tpg-mark{display:none!important}

/* 6 · the feature picture takes 42 of the column, not 56 */
.mobx section.cover{grid-template-columns:58fr 42fr!important}

/* 7 · the border must live inside the 524, not on top of it */
.mobx section.tpmore{box-sizing:border-box!important;height:auto!important;
 padding-top:46px!important}
/* tpq-home */
/* tpq-page47 */
section.cover.cover.cover.cover{padding-top:47.00px!important;padding-bottom:47.00px!important}
section.tpmore.tpmore.tpmore.tpmore{padding-top:47.00px!important;padding-bottom:47.00px!important}
section.tpsay.tpsay.tpsay.tpsay{padding-top:46.00px!important;padding-bottom:47.00px!important}
.tpgames.tpgames.tpgames.tpgames{padding-top:47.00px!important;padding-bottom:47.00px!important}
section.pbody.pbody.pbody:not(.arcpage){padding-top:46.00px!important;padding-bottom:47.00px!important}
div.abody.abody.abody{padding-top:27.00px!important;padding-bottom:47.00px!important}

/* tpq-puzfix — last word: the carousel sized each card to a third of the track.
   In a four-column grid that capped every box at 85px. */
.mobx section.tpgames .tpg-grid a.tpg-item.tpg-item.tpg-item{
 box-sizing:border-box!important;
 flex:none!important;width:100%!important;max-width:none!important;min-width:0!important;
 height:100%!important;margin:0!important}
.mobx section.tpgames .tpg-grid a.tpg-item.tpg-item .tpg-d{max-width:none!important}

/* tpq-home2 — 2026-09-11 */

/* 1 · the first section had an EMPTY grid row 2 between the head and the story,
      eating 122px. the story starts on the row straight after the head now.
      the section height is untouched: still 524. */
.mobx section.cover.cover.cover > .eyebrow{grid-row:2!important}
.mobx section.cover.cover.cover > h2{grid-row:3!important}
.mobx section.cover.cover.cover > .dek{grid-row:4!important}
.mobx section.cover.cover.cover > .byline{grid-row:5!important}
.mobx section.cover.cover.cover > .readmore{grid-row:6!important}

/* 2 · the picture was 543 wide inside its own column. it fills it now, and the
      column is the larger half. */
.mobx section.cover.cover.cover{grid-template-columns:46fr 54fr!important}
 /* Two real columns, both in fractions of the content width, so the section scales.
    The picture used to span every grid row, which shared its height out among the
    rows and put an empty band between the head and the story. Six content rows size
    to their words and a seventh soaks up whatever is left. */
.mobx section.cover.cover.cover{position:relative!important;height:auto!important;
 display:grid!important;
 grid-template-columns:46fr 54fr!important;
 grid-template-rows:auto auto auto auto auto auto!important;
 column-gap:56px!important;row-gap:0!important;align-content:start!important}
.mobx section.cover.cover.cover > .tpsec-hd{grid-column:1 / -1!important}
.mobx section.cover.cover.cover .cover-img{
 grid-column:2!important;grid-row:2 / 7!important;
 align-self:start!important;width:100%!important;max-width:none!important;
 height:auto!important;margin:0!important;position:static!important;overflow:hidden!important}
.mobx section.cover.cover.cover .cover-img img{
 width:100%!important;height:auto!important;max-width:100%!important;
 object-fit:cover!important;display:block!important}
.mobx section.cover.cover.cover > .eyebrow,
.mobx section.cover.cover.cover > h2,
.mobx section.cover.cover.cover > .dek,
.mobx section.cover.cover.cover > .byline,
.mobx section.cover.cover.cover > .readmore{grid-column:1!important;max-width:none!important}

/* 3 · every section is divided by the orange rule, not a grey hairline */
.mobx > section.tpmore,
.mobx > section.tpsay,
.mobx > section.tpgames{
 border-top:2px solid #c4ab67!important;border-bottom:0!important}

/* 4 · four puzzles, then "See all eight" */
.mobx section.tpgames .tpg-grid{grid-auto-rows:auto!important}
.mobx section.tpgames .tpg-grid a.tpg-item:nth-child(n+5){display:none!important}

/* 5 · the empty row was align-content:stretch spreading the leftover height
      between the head and the story. rows size to content now. */
.mobx section.cover.cover.cover{align-content:start!important}

/* 6 · four boxes, tall enough to fill the section they sit in */
.mobx section.tpgames .tpg-grid{grid-auto-rows:auto!important;align-content:start!important}
.mobx section.tpgames .tpg-grid a.tpg-item.tpg-item.tpg-item{
 justify-content:flex-start!important;padding:26px 24px 24px!important}
.mobx section.tpgames .tpg-grid a.tpg-item .tpg-play,
.mobx section.tpgames .tpg-grid a.tpg-item > span:last-child{margin-top:auto!important}
/* tpq-home2 */

/* tpq-rule — THE SECTION RULE. One block. Everything else defers to it.
   Every home section: content starts 47 below its top edge and ends 47 above its
   bottom edge. The height is whatever that requires — it is not a number anyone
   picked, and nothing may lock it. tp-secfit in site.js sets the two paddings. */
.mobx > section.cover.cover.cover.cover,
.mobx > section.tpmore.tpmore.tpmore.tpmore,
.mobx > section.tpsay.tpsay.tpsay.tpsay,
.mobx > section.tpgames.tpgames.tpgames.tpgames{
 height:auto!important;min-height:0!important;max-height:none!important;
 box-sizing:border-box!important}
.mobx > section.tpgames .tpg-in,
.mobx > section.tpgames .tpg-grid{height:auto!important;min-height:0!important}

/* tpq-marks — the user's marked-up home page, 2026-09-11 */

/* MASTHEAD: "Culture & Commerce" out; the stack is eyebrow, wordmark, rule, lead */
.mobx>.mast .tpm .tpm-sub{display:none!important}

/* THE FEATURE: the words and the picture are both centred on the section's middle.
   head on row 1, a flexible spacer, the five story rows, a flexible spacer. The
   picture spans the whole region below the head and centres itself. */
.mobx section.cover.cover.cover{
 grid-template-rows:auto 1fr auto auto auto auto auto 1fr!important}
.mobx section.cover.cover.cover > .eyebrow{grid-row:3!important}
.mobx section.cover.cover.cover > h2{grid-row:4!important}
.mobx section.cover.cover.cover > .dek{grid-row:5!important}
.mobx section.cover.cover.cover > .byline{grid-row:6!important}
.mobx section.cover.cover.cover > .readmore{grid-row:7!important}
.mobx section.cover.cover.cover .cover-img{grid-row:2 / -1!important;align-self:center!important}

/* WHAT WE COVER: air between the lead and CATEGORIES; the rule sits in the MIDDLE of
   the gap between the two rows; no rule under the last row. */
.mobx section.tpsay .tpsay-bhd{margin-top:40px!important}
.mobx section.tpsay .tpsay-beats{row-gap:0!important}
.mobx section.tpsay .tpsay-beats li{
 padding:22px 0!important;border-top:0!important;
 border-bottom:1px solid rgba(25,23,18,.13)!important}
.mobx section.tpsay .tpsay-beats li:nth-child(-n+3){padding-top:0!important}
.mobx section.tpsay .tpsay-beats li:nth-child(n+4){border-bottom:0!important;padding-bottom:0!important}

/* PUZZLES: every box is a whole box — the carousel had dropped the left edge */
.mobx section.tpgames .tpg-grid a.tpg-item.tpg-item.tpg-item{
 border:1px solid rgba(20,20,22,.14)!important}
/* tpq-marks */
.mobx section.tpgames .tpg-grid a.tpg-item.tpg-item.tpg-item.tpg-item:nth-child(n){
 border-left:1px solid rgba(20,20,22,.14)!important;padding-left:24px!important}

/* tpq-fix2 — 2026-09-11 */

/* 1 · section dividers are BLACK, not orange, not grey */
.mobx > section.tpmore.tpmore,
.mobx > section.tpsay.tpsay,
.mobx > section.tpgames.tpgames{
 border-top:2px solid #141416!important;border-bottom:0!important}
.mobx > section.cover .tpsec-hd,
.mobx > section.tpmore .tpmore-hd,
.mobx > section.tpsay .tpsec-hd,
.mobx > section.tpgames .tpg-hd{border-top:0!important}
.mobx .wrap{border-top:0!important}

/* 2 · the footer starts and ends on the page's own two lines: 46 and the rail */
/* (the marks are placed on the rail by ink in tp-footfit; the box may overhang) */

/* 3 · the wordmark is smaller, so the lines above and below it have room */
.mobx>.mast .tpm .dm-plate{height:84px!important}

/* tpq-mast2 — 2026-09-11 */
/* the two lines that box the masthead are solid black, full width, no gaps */
.mobx > header{border-bottom:2px solid #141416!important;box-shadow:none!important}
.mobx > header::after,.mobx > header::before{display:none!important}
.mobx > .mast{border-top:0!important;border-bottom:2px solid #141416!important}
.mobx div.mast.mast.mast.mast.mast{border-bottom:2px solid #141416!important;border-top:0!important}
.mobx > header.header, .mobx > header{border-bottom:2px solid #141416!important}

/* tpq-line — Variety Partners puts the line on the SECTION itself, which is full
   bleed: `section{border-top:1px solid var(--line)}`. The line runs the whole page,
   edge to edge. Only the content inside is held to the gutter. */
.mobx > section.tpmore.tpmore,
.mobx > section.tpsay.tpsay,
.mobx > section.tpgames.tpgames{
 border-top:1px solid #e5e0d5!important;border-bottom:0!important}
.mobx > section.tpmore.tpmore::before,
.mobx > section.tpsay.tpsay::before,
.mobx > section.tpgames.tpgames::before{display:none!important;content:none!important}

/* the line under the top bar runs the whole page, one grey, no black segment */
.mobx > header, .mobx > header.header{
 border-bottom:1px solid #e5e0d5!important;box-shadow:none!important}
.mobx > header::after, .mobx > header::before{display:none!important}

/* tpq-gutter — ONE gutter for the whole page. Above 1440 the cover section was
   inset 120 more than the other sections, and the footer row was pinned to a fixed
   box, so everything read as indented. All of it now uses the same two lines. */
.mobx > section.cover.cover.cover.cover{
 width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;
 padding-left:max(46px, calc((100% - 1348px)/2))!important;
 padding-right:max(46px, calc((100% - 1348px)/2))!important}
.mobx > section.tpmore.tpmore.tpmore,
.mobx > section.tpsay.tpsay.tpsay,
.mobx > section.tpgames.tpgames.tpgames{
 padding-left:max(46px, calc((100% - 1348px)/2))!important;
 padding-right:max(46px, calc((100% - 1348px)/2))!important}
footer.tpfoot .tpf-in{
 width:100%!important;max-width:none!important;margin:0!important;
 padding-left:max(46px, calc((100% - 1348px)/2))!important;
 padding-right:max(46px, calc((100% - 1348px)/2))!important}
footer.tpfoot .tpf-row1, footer.tpfoot .tpf-row2{
 width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;
 padding-left:0!important;padding-right:0!important}

/* tpq-bleed — the section (and its line) runs the full window; the content inside
   stays on the 1348 column measured from the window, not from the .mobx box. */
.mobx > section.cover.cover.cover.cover,
.mobx > section.tpmore.tpmore.tpmore,
.mobx > section.tpsay.tpsay.tpsay,
.mobx > section.tpgames.tpgames.tpgames{
 margin-left:calc(50% - calc(50 * var(--vw, 1vw)))!important;
 margin-right:calc(50% - calc(50 * var(--vw, 1vw)))!important;
 width:calc(100 * var(--vw, 1vw))!important;max-width:calc(100 * var(--vw, 1vw))!important;
 padding-left:max(46px, calc((calc(100 * var(--vw, 1vw)) - 1348px)/2))!important;
 padding-right:max(46px, calc((calc(100 * var(--vw, 1vw)) - 1348px)/2))!important}
footer.tpfoot .tpf-in{
 padding-left:max(46px, calc((calc(100 * var(--vw, 1vw)) - 1348px)/2))!important;
 padding-right:max(46px, calc((calc(100 * var(--vw, 1vw)) - 1348px)/2))!important}
/* the categories block is a flow child of the body, not an overlay */
.mobx section.tpsay .tpsay-body{display:block!important}
.mobx section.tpsay .tpsay-right{display:block!important;width:100%!important}

/* tpq-gut46 — MEASURED off varietypartners: the gutter is a flat 46 at every width
   (1280, 1440, 1680, 1920, 2560 — all 46). The Position was capping content at 1348,
   so its gutter grew to 286 at 1920 and 606 at 2560 and the page read pushed-in.
   One gutter, 46, everywhere: banner, every section, the footer. */
.mobx.mobx.mobx{max-width:none!important;width:100%!important;margin:0!important}
.mobx > header.header, .mobx > header{
 padding-left:46px!important;padding-right:46px!important;max-width:none!important}
.mobx > .mast.mast.mast.mast.mast{
 padding-left:46px!important;padding-right:46px!important;max-width:none!important}
.mobx > section.cover.cover.cover.cover,
.mobx > section.tpmore.tpmore.tpmore,
.mobx > section.tpsay.tpsay.tpsay,
.mobx > section.tpgames.tpgames.tpgames{
 margin-left:0!important;margin-right:0!important;
 width:100%!important;max-width:none!important;
 padding-left:46px!important;padding-right:46px!important}
.mobx > section .wrap, .mobx > section .tpsay-in, .mobx > section .tpmore-in,
.mobx > section .tpg-in{max-width:none!important;width:100%!important;
 margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important}
footer.tpfoot .tpf-in{max-width:none!important;width:100%!important;
 padding-left:46px!important;padding-right:46px!important}
/* the categories block flows normally so the rhythm solver can space it */
.mobx section.tpsay .tpsay-body.tpsay-body{display:block!important}
.mobx section.tpsay .tpsay-right.tpsay-right{display:block!important;width:100%!important}
.mobx section.tpsay .tpsay-bhd.tpsay-bhd{display:block!important}

/* CATEGORIES sits clear of the grid beneath it: the label box and the first row
   were overlapping when the gap was solved on the text rather than the boxes. */
.mobx section.tpsay .tpsay-bhd.tpsay-bhd{margin-bottom:24px!important}

/* tpq-feature — head on top, then one row: story column, picture beside it.
   Nothing spans rows, so the picture can never stretch the words. */
.mobx > section.cover.cover.cover.cover{
 position:relative!important;display:block!important;height:auto!important}
.mobx > section.cover.cover.cover.cover > .tpsec-hd{width:100%!important;max-width:none!important}
.mobx > section.cover.cover.cover.cover .tpf-row{
 display:flex!important;align-items:flex-start!important;gap:56px!important;width:100%!important}
.mobx > section.cover.cover.cover.cover .tpf-col{
 flex:0 0 auto!important;width:calc((100% - 56px) * 0.50)!important;min-width:0!important;
 order:1!important}
.mobx > section.cover.cover.cover.cover .tpf-col > *{
 display:block!important;width:100%!important;max-width:none!important;margin-left:0!important}
.mobx > section.cover.cover.cover.cover .tpf-col > .readmore{display:inline-block!important;width:auto!important}
.mobx > section.cover.cover.cover.cover .cover-img{
 position:static!important;flex:0 0 auto!important;margin:0!important;
 order:2!important;margin-left:auto!important;align-self:flex-start!important;
 max-width:calc((100% - 56px) * 0.50)!important;height:auto!important;display:block!important}
/* an aspect-ratio was being forced on this image elsewhere (3:2), which is why the
   picture rendered 452x301 when its own shape is 1400x788. */
.mobx > section.cover.cover.cover.cover .cover-img img{
 width:100%!important;height:auto!important;display:block!important;max-width:none!important;
 aspect-ratio:auto!important;object-fit:fill!important;min-height:0!important}


/* CATEGORIES was sitting almost on the lead. One clear break between the two. */
.mobx section.tpsay .tpsay-right.tpsay-right{margin-top:40px!important}
.mobx section.tpsay .tpsay-bhd.tpsay-bhd{margin-bottom:28px!important}
/* the feature picture keeps a sane share of the row */
.mobx > section.cover.cover.cover.cover{
 /* 100% here is the content box (the gutters are padding), so only the column gap
    comes off the top — subtracting the gutters again left 92px unused on the right. */
 grid-template-columns:calc((100% - 56px) * 0.44) calc((100% - 56px) * 0.56)!important}

/* the divider belongs to every section EXCEPT the first one on the page.
   Order is Feature, Archive, Puzzles, Brief — so the Feature is first and bare. */
.mobx > section.cover.cover.cover{border-top:0!important}
.mobx > section.tpsay.tpsay.tpsay{border-top:1px solid #e5e0d5!important}

/* tpq-saytune — WHAT WE COVER, measured on cap/baseline, not on boxes.
   lead last baseline -> CATEGORIES cap        48  (the section's block gap)
   CATEGORIES baseline -> first key cap        24  (the label hugs its grid)
   row baseline -> rule -> next key cap     24/24  (the rule sits dead centre)
   The px below are the margins that produce those ink gaps: the lead's last line
   box runs 9.0 past its baseline, the label's box runs 16.0 past its own, and a
   key's cap sits 1.0 inside its box. */
.mobx section.tpsay .tpsay-right.tpsay-right.tpsay-right{margin-top:39px!important}
.mobx section.tpsay .tpsay-bhd.tpsay-bhd.tpsay-bhd{margin-top:39px!important;margin-bottom:8px!important}
.mobx section.tpsay .tpsay-beats.tpsay-beats li{padding:23px 0 16.75px!important}
.mobx section.tpsay .tpsay-beats.tpsay-beats li:nth-child(-n+3){padding-top:0!important}
.mobx section.tpsay .tpsay-beats.tpsay-beats li:nth-child(n+4){padding-bottom:0!important}

/* tpq-featfill — the feature row: words on the left half, picture on the right half,
   56 between them, picture finishing on the right rail. No dead band in the middle. */
.mobx > section.cover.cover.cover.cover .cover-img{
 margin-left:0!important;
 width:calc((100% - 56px) * 0.50)!important;
 max-width:calc((100% - 56px) * 0.50)!important}
/* the two halves centre against each other: no long empty tail under the words at
   wide widths, and no empty band beside the picture at narrow ones. */
/* was align-items:center - that centred a 227.8 text column against a 383.9
   image, 78 of dead air above the words and 156 below. Columns start level now. */
.mobx > section.cover.cover.cover.cover .tpf-row{align-items:stretch!important}
.mobx > section.cover.cover.cover.cover .cover-img{align-self:flex-start!important}
/* the column is a top-packed flex column. align-items:flex-start matters:
   without it the flex parent stretches the inline-block READ THE STORY to the
   full 682 and its underline runs the whole measure instead of hugging the words. */
.mobx > section.cover.cover.cover.cover .tpf-col{
 display:flex!important;flex-direction:column!important;
 justify-content:flex-start!important;align-items:flex-start!important}
.mobx > section.cover.cover.cover.cover .tpf-col > .eyebrow,
.mobx > section.cover.cover.cover.cover .tpf-col > h2,
.mobx > section.cover.cover.cover.cover .tpf-col > .dek,
.mobx > section.cover.cover.cover.cover .tpf-col > .byline{align-self:stretch!important}
/* byline -> link was 14 - 6 = 8 apart on desktop and read as collided.
   The phone already sets 16 between them; desktop takes the same 16. */
.mobx > section.cover.cover.cover.cover .tpf-col > .readmore{
 margin-top:16px!important}
/* the picture takes the 16px radius the phone already draws, so both widths agree */
.mobx > section.cover.cover.cover.cover .cover-img img{
 border-radius:16px!important;object-fit:cover!important;display:block!important}
/* under 900 the feature is one column: words, then the picture at full measure. */
@media (max-width:760px){
 .mobx > section.cover.cover.cover.cover .tpf-row{display:block!important}
 .mobx > section.cover.cover.cover.cover .tpf-col{width:100%!important}
 .mobx > section.cover.cover.cover.cover .cover-img{
  width:100%!important;max-width:100%!important;margin:32px 0 0!important}
}

/* tpq-kicker — the section kicker sits ON ITS OWN LINE above the title. The rule that
   made it a block lived inline in index.html, so on games.html the kicker ran into the
   title and printed "PlayPuzzles". It belongs to the stylesheet, not to one page. */
.mobx section.cover>.tpsec-hd h2::before,
.mobx .tpmore-hd.tpmore-hd h2::before,
.mobx .tpg-hd.tpg-hd h2::before,
.mobx .tpsay .tpsec-hd h2::before{
 display:block!important;margin:0 0 10px!important;
 font:700 10px/1 var(--tp-sans)!important;letter-spacing:3px!important;
 text-transform:uppercase!important;color:#876c22!important}

/* tpq-puzicons — the puzzle page shows each game's mark again; the home shelf stays a
   row of name boxes. Scoped on data-shelf, which only the home section carries. The card
   already has a four-row layout (name, line, mark, PLAY) — this just lets it through. */
.mobx section.tpgames:not([data-shelf]) .tpg-grid a.tpg-item .tpg-art{
 display:flex!important;width:100%!important;
 align-items:flex-end!important;justify-content:flex-start!important;
 margin:0!important;padding:0!important}
.mobx section.tpgames:not([data-shelf]) .tpg-grid a.tpg-item .tpg-art svg{
 width:auto!important;height:96px!important;max-height:96px!important;max-width:100%!important;
 transform-origin:50% 60%!important;
 transition:transform .5s cubic-bezier(.2,.6,.2,1)!important}
.mobx section.tpgames:not([data-shelf]) .tpg-grid a.tpg-item:hover .tpg-art svg{
 transform:translateY(-6px) rotate(-3deg)!important}
.mobx section.tpgames:not([data-shelf]) .tpg-grid{grid-auto-rows:auto!important;row-gap:16px!important}
.mobx section.tpgames:not([data-shelf]) .tpg-grid a.tpg-item{padding:26px 24px 22px!important}
/* the four-card limit is the HOME shelf's rule ("see all eight"). The puzzle page is
   where all eight live. */
.mobx section.tpgames:not([data-shelf]) .tpg-grid a.tpg-item:nth-child(n+5){display:flex!important}

/* the puzzle grid was four columns at every width, so at 390 each card was 78px wide
   and every word broke. Two up on a tablet, one up on a phone. */
@media (max-width:760px){
 .mobx section.tpgames .tpg-grid.tpg-grid.tpg-grid{
  grid-template-columns:repeat(2,1fr)!important;column-gap:16px!important;row-gap:16px!important}
}
@media (max-width:599px){
 .mobx section.tpgames .tpg-grid.tpg-grid.tpg-grid{
  grid-template-columns:1fr!important}
 .mobx section.tpgames:not([data-shelf]) .tpg-grid a.tpg-item .tpg-art svg{
  height:72px!important;max-height:72px!important}
 /* the 132px art row leaves a hole under a one-line description on a phone */
 .mobx section.tpgames .tpg-grid .tpg-item .tpg-art.tpg-art{height:auto!important;
  padding:18px 0 0!important}
 .mobx section.tpgames .tpg-grid .tpg-item.tpg-item{grid-template-rows:auto auto auto auto!important}
}

/* the card hover: the mark lifts 6 and slants 3 degrees, the border goes to ink and
   PLAY goes orange. An old `.tpg-item:hover{opacity:.62}` was fading the whole card
   to grey on top of that, which read as the card switching off, not lifting. */
.mobx section.tpgames .tpg-grid a.tpg-item.tpg-item:hover{
 opacity:1!important;border-color:#141416!important}

/* tpq-sudmark — the digits were set at 30 inside a 32-unit cell whose borders eat 6
   units, so the 1 sat 2 units off the top line. 20 leaves 6 clear all round, and the
   three of them run the diagonal so no column carries two. */
.tpg-art svg .lg.lg{font-size:20px!important}

/* tp-footclip */

/* the 153 lock is a DESKTOP number. Below 901 the footer stacks to ~277, so the
   lock plus overflow:hidden was cutting the publisher line and both marks off.
   Desktop cannot be touched by this — the block does not fire above 900. */
@media(max-width:760px){
 footer.tpfoot.tpfoot{height:auto!important;min-height:0!important;max-height:none!important;
  overflow:visible!important}
 .mobx footer.tpfoot>.tpf-in,footer.tpfoot>.tpf-in{height:auto!important;min-height:0!important;
  padding-left:22px!important;padding-right:22px!important}
}

/* ---- the archive's Show all had nothing to open into -------------------
   Pressing it did set .open and freed the list's max-height, but the band
   itself is held at a fixed height, so the list could only grow 30px and the
   click read as broken. When the archive is open the band's height follows
   its rows, which is the site's own rule anyway: nothing locks a height. */
section.pbody.arcpage.open,
.mobx section.pbody.arcpage.open{
 height:auto!important;min-height:0!important;max-height:none!important}
section.pbody.arcpage.open .awrap,
.mobx section.pbody.arcpage.open .awrap{
 height:auto!important;max-height:none!important;flex:0 0 auto!important}
section.pbody.arcpage.open .clist,
.mobx section.pbody.arcpage.open .clist{
 height:auto!important;max-height:none!important;overflow:visible!important}

/* ---- one grey line under the header, on every page ---------------------
   MEASURED at 1512: the line is painted by .nav's own bottom border, not by
   the header's - the nav is white and 56 tall, so it covers the header's
   border. Archive, home and Get Featured carry that border on .nav; the 36
   article pages do not, so they showed NO line at all, and games.html drew a
   second one on section.tpgh, so it showed a 2px line. Same 1px everywhere. */
header .nav,.mobx header .nav{
 border-bottom:1px solid #e5e0d5!important}
.mobx section.tpgh{border-top:0!important}

/* ---- the article's lead picture --------------------------------------
   MEASURED: 1348 x 898.7 on a 1512 screen - a 3:2 box cropping a 16:9
   source, nearly a full screen tall, and it did not match the phone, which
   shows the picture at its own ratio. The desktop now shows the same 16:9
   the file actually is: 1348 x 758, no crop, no letterbox. */
@media(min-width:761px){
 .mobx .abody .aimg img,.abody .aimg img{
  aspect-ratio:16/9!important;height:auto!important;object-fit:cover!important}
}

/* ---- nothing is shown until the page has settled -----------------------
   MEASURED: every page moved 4-6 times in its first 700ms - up to 235px on
   the home page - as the scripts built the hero, the rails and the section
   frames. That is the flicker. The page is held back for one frame after the
   solvers' first sweep and revealed as one finished thing; if the scripts
   never run, the CSS reveals it anyway at 1.2s so nothing can stay hidden. */
/* opacity, NOT visibility: every solver here skips an element whose computed
   visibility is 'hidden', and visibility inherits - so hiding <html> that way
   made all of them measure nothing and bail, which left the banners at their raw
   height. Opacity hides the page without touching what the solvers can see. */
/* THE GATE IS SET BY A SCRIPT IN <head>, NOT BY THIS SHEET.
   Netlify's site card screenshots the deployed root and was catching the page
   while it was still held at opacity 0, so the card came back blank white while
   Variety's showed its home page. With the gate on a class that only a running
   script adds, anything that captures without JS paints the page immediately,
   and the fallback is 0.5s rather than 1.2s for anything that does run it. */
html.tp-gate{opacity:.01;animation:tp-reveal 0s linear .5s forwards}
@keyframes tp-reveal{to{opacity:1}}
html.tp-ready{opacity:1!important;animation:none!important}


/* tpq-tutbtns — 2026-09-14
   The how-to-play pane's button row sat FLUSH on the bottom edge of the demo
   card: 0.00 above it and 34.00 below. `.tpsh-btns{margin:0!important}` was
   written for the splash pane, which sets its own air through .tpsh-dnote's
   22px bottom margin, and it wiped the tutorial pane's 22 as well. The splash
   measures 22 above its buttons; the tutorial now measures the same 22. */
.tpsh .tpsh-tut .tpsh-btns{margin:22px 0 0!important}

/* ==========================================================================
   WHAT WE COVER — Variety's ECOSYSTEM carousel (2026-09-15)
   Measured on varietypartners' desktop at 1512:
     .car    flex, gap 22, padding 26px 46px 18px, overflow-x auto
     .lchip  radius 12, #fff, shadow rgba(20,20,22,.06) 0 4px 12px, pad 0 34px
     the hint carries the "-> swipe" cue; no dots on the desktop
   The phone runs the same thing scaled: gap 14, padding 14px 22px 18px.
   ========================================================================== */
@media(min-width:761px){
 .mobx.mobx.mobx section.tpsay.tpsay .tpsay-body > p:first-of-type{display:none!important}
 .mobx.mobx.mobx section.tpsay.tpsay .tpsay-bhd.tpsay-bhd{display:none!important}
 .mobx.mobx.mobx section.tpsay.tpsay .tpsay-body{padding-top:0!important}
 .mobx.mobx.mobx section.tpsay.tpsay .tpsay-right{margin-top:0!important;padding-top:0!important}

 .mobx.mobx.mobx section.tpsay.tpsay ul.tpsay-beats.tpsay-beats{
  display:flex!important;flex-wrap:nowrap!important;list-style:none!important;
  overflow-x:auto!important;scroll-snap-type:x mandatory!important;scrollbar-width:none!important;
  gap:22px!important;padding:26px 46px 18px!important;margin:0 -46px!important;
  width:auto!important;max-width:none!important;grid-template-columns:none!important}
 .mobx.mobx.mobx section.tpsay.tpsay ul.tpsay-beats::-webkit-scrollbar{display:none!important}
 .mobx.mobx.mobx section.tpsay.tpsay ul.tpsay-beats.tpsay-beats > li{
  flex:0 0 330px!important;width:330px!important;max-width:330px!important;min-width:0!important;
  scroll-snap-align:center!important;
  display:flex!important;flex-direction:column!important;gap:8px!important;
  /* Variety's .scard, measured at 1512: padding 22, radius 18,
     border 1px rgb(229,224,213), shadow rgba(20,20,22,.05) 0 1px 2px */
  background:#fff!important;border:1px solid rgb(229,224,213)!important;
  border-radius:18px!important;box-shadow:0 1px 2px rgba(20,20,22,.05)!important;
  padding:22px!important;margin:0!important;border-top:1px solid rgb(229,224,213)!important}
 /* the title takes Variety's h3 "Growth & Production" at 1512:
    serif 20/22, weight 600, tracking -0.3, rgb(20,20,22), title case */
 .mobx.mobx.mobx section.tpsay.tpsay ul.tpsay-beats.tpsay-beats > li > .k{
  font-family:"Iowan Old Style",Palatino,Georgia,Cambria,serif!important;
  font-size:20px!important;line-height:22px!important;font-weight:600!important;
  letter-spacing:-.3px!important;text-transform:none!important;
  color:rgb(20,20,22)!important;margin:2px 0 3px!important}
 /* and the line under it takes Variety's li "Visibility & conversion systems":
    sans 13.5/22.275, weight 400, tracking normal, rgb(74,74,82) */
 .mobx.mobx.mobx section.tpsay.tpsay ul.tpsay-beats.tpsay-beats > li > .v{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  font-size:13.5px!important;line-height:22.275px!important;font-weight:400!important;
  letter-spacing:normal!important;color:rgb(74,74,82)!important;margin:0!important}
}


/* WHAT WE COVER, desktop: two rows of three. The desktop has the room to show
   all six at once, so there is nothing to swipe to and no cue - Variety hides its
   own cue above 900 for the same reason. The phone keeps the carousel.
   Gutters and row gap are one number, 22, the same gap the rail carried. */
@media(min-width:761px){
 .mobx.mobx section[data-rail] .tplab.tplab.tplab::after{display:none!important}
 .mobx.mobx.mobx section.tpsay.tpsay ul.tpsay-beats.tpsay-beats{
  display:grid!important;grid-template-columns:repeat(3,1fr)!important;
  grid-auto-rows:1fr!important;
  overflow:visible!important;scroll-snap-type:none!important;
  gap:22px!important;padding:0!important;margin:0!important;
  width:100%!important;max-width:none!important}
 .mobx.mobx.mobx section.tpsay.tpsay ul.tpsay-beats.tpsay-beats > li{
  flex:none!important;width:auto!important;max-width:none!important;
  scroll-snap-align:none!important}
}

/* THE FEATURE head: orange eyebrow left, grey label right, rule, then the article.
   The h2 said "The Feature" a second time under the eyebrow that already says
   THIS WEEK and beside the grey that now says THE FEATURE, and the article's own
   headline is the title the reader needs. */
/* the h2 keeps its box because the orange kicker is its ::before - only its
   own words go, in JS, so THIS WEEK still paints. See tp-featword. */

/* SPECIAL EDITION comes off. The section head already carries the orange eyebrow
   (THIS WEEK); a second orange line inside the same section breaks the rule that
   one section has one orange kicker. The story's own chain is now
   headline -> brief -> byline -> link, solved to one ink gap. */
.mobx > section.cover.cover.cover.cover .tpf-col > .eyebrow{display:none!important}

/* THE FEATURE as Variety's card — desktop. Values measured off VP's .wcard at 1512. */
@media(min-width:761px){
 .mobx > section.cover.cover.cover.cover .tpf-row.tpf-card{
  display:block!important;background:#fff!important;
  border:1px solid rgb(229,224,213)!important;border-radius:16px!important;
  overflow:hidden!important;padding:0!important;margin:0!important}
 .mobx > section.cover.cover.cover.cover .tpf-card > .tpf-col{
  display:block!important;width:100%!important;max-width:none!important;flex:none!important;
  padding:26px 34px 30px!important;margin:0!important;order:1!important}
 /* the headline reserves two lines and the brief two, so the card is the same
    height every week whatever the story is */
 .mobx > section.cover.cover.cover.cover .tpf-card > .tpf-col > h2{
  height:51.52px!important;overflow:hidden!important;display:-webkit-box!important;
  -webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;margin:0 0 14px!important}
 .mobx > section.cover.cover.cover.cover .tpf-card > .tpf-col > .dek{
  height:54.4px!important;overflow:hidden!important;display:-webkit-box!important;
  -webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;margin:0 0 16px!important}
}

/* the archive comes off the home page - it has its own page */
.mobx > section.tpmore[data-tp-removed]{display:none!important}

/* THE FEATURE RAIL, desktop. Variety's .car: flex, snap, the cards are .wcard. */
@media(min-width:761px){
 .mobx > section.cover.cover.cover.cover .tpf-rail{
  display:flex!important;flex-wrap:nowrap!important;gap:22px!important;
  overflow-x:auto!important;scroll-snap-type:x mandatory!important;scrollbar-width:none!important;
  padding:0 0 4px!important;margin:0!important;width:100%!important}
 .mobx > section.cover.cover.cover.cover .tpf-rail::-webkit-scrollbar{display:none!important}
 .mobx > section.cover.cover.cover.cover .tpf-rail > .tpf-card{
  flex:1 1 0!important;width:auto!important;max-width:none!important;
  scroll-snap-align:start!important;text-decoration:none!important;color:inherit!important}
 .mobx > section.cover.cover.cover.cover .tpf-rail > .tpf-card > .tpf-col{
  padding:22px 24px 24px!important}
 .mobx > section.cover.cover.cover.cover .tpf-rail > .tpf-card > .tpf-col > h2{
  font-size:20px!important;line-height:22px!important;height:44px!important}
 .mobx > section.cover.cover.cover.cover .tpf-rail > .tpf-card > .tpf-col > .dek{
  font-size:15.5px!important;line-height:24px!important;height:48px!important;
  -webkit-line-clamp:2!important}
}

/* the rail's cards are all one card. The first is the old .tpf-row, which still
   carried width:100% from the single-card layout, so it ran the full measure and
   pushed the other two off; and cards two and three are anchors, which never got
   the .wcard chrome. Both are settled here, at the rail's own specificity. */
@media(min-width:761px){
 .mobx > section.cover.cover.cover.cover .tpf-rail > .tpf-card.tpf-card{
  flex:1 1 0!important;width:auto!important;max-width:none!important;
  min-width:0!important;display:block!important;
  background:#fff!important;border:1px solid rgb(229,224,213)!important;
  border-radius:16px!important;overflow:hidden!important;
  padding:0!important;margin:0!important;
  text-decoration:none!important;color:inherit!important;scroll-snap-align:start!important}
 .mobx > section.cover.cover.cover.cover .tpf-rail > .tpf-card.tpf-card > .tpf-col{
  display:block!important;width:100%!important;max-width:none!important;
  padding:22px 24px 24px!important;margin:0!important}
 /* the headline keeps the section's own 23/25.76 - a rule further up wins the
    font and only the box is settled here. Two lines of 25.76 is 51.52, and at
    44 the second line's descenders were being cut. */
 .mobx > section.cover.cover.cover.cover .tpf-rail > .tpf-card.tpf-card > .tpf-col > h2{
  height:51.52px!important;margin:0 0 12px!important;overflow:hidden!important;
  display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important}
 .mobx > section.cover.cover.cover.cover .tpf-rail > .tpf-card.tpf-card > .tpf-col > .dek{
  font:15.5px/24px "Iowan Old Style",Georgia,"Times New Roman",Times,serif!important;
  color:rgb(74,71,64)!important;height:48px!important;margin:0 0 14px!important;overflow:hidden!important;
  display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important}
 .mobx > section.cover.cover.cover.cover .tpf-rail > .tpf-card.tpf-card > .tpf-col > .byline{
  font:700 10px/10px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  letter-spacing:2.4px!important;text-transform:uppercase!important;
  color:rgb(139,135,129)!important;margin:0 0 14px!important}
 .mobx > section.cover.cover.cover.cover .tpf-rail > .tpf-card.tpf-card > .tpf-col > .readmore{
  display:inline-block!important;font:700 10px/10px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  letter-spacing:2.4px!important;text-transform:uppercase!important;color:rgb(20,20,22)!important;
  border-bottom:1px solid rgb(196,171,103)!important;padding-bottom:5px!important;margin:8px 0 0!important}
}

/* ---- THE FEATURE RAIL takes Variety's STUDIO tile, measured at 1512 ----------
   .lcard  W 458.67  radius 16  border 1px rgba(20,20,22,.07)
           shadow rgba(20,20,22,.08) 0 10px 26px   white   overflow hidden
           transition transform .28s cubic-bezier(.2,.7,.2,1), box-shadow same
   its picture  456.67 x 342.5  = 4:3  object-fit cover  radius 0
   its rail     flex  gap 22  padding 26px 46px 18px
   and the hover is the PORTFOLIO card's, measured off .wcard:
     .wcard:hover            translateY(-4px), shadow rgba(20,20,22,.1) 0 16px 34px
     .wcard:hover .thumb img scale(1.05), over .4s                              */
@media(min-width:761px){
 .mobx > section.cover.cover.cover.cover .tpf-rail{
  gap:22px!important;padding:26px 0 18px!important;overflow:visible!important}
 .mobx > section.cover.cover.cover.cover .tpf-rail > .tpf-card.tpf-card{
  border:1px solid rgba(20,20,22,.07)!important;border-radius:16px!important;
  box-shadow:0 10px 26px rgba(20,20,22,.08)!important;
  transition:transform .28s cubic-bezier(.2,.7,.2,1),
             box-shadow .28s cubic-bezier(.2,.7,.2,1)!important;
  will-change:transform!important}
 .mobx > section.cover.cover.cover.cover .tpf-rail > .tpf-card.tpf-card:hover{
  transform:translateY(-4px)!important;
  box-shadow:0 16px 34px rgba(20,20,22,.10)!important}
 /* the picture is Variety's 4:3 at the tile's inner width: 456.67 x 342.5 */
 .mobx > section.cover.cover.cover.cover .tpf-rail > .tpf-card.tpf-card > .cover-img{
  height:342.5px!important;overflow:hidden!important}
 .mobx > section.cover.cover.cover.cover .tpf-rail > .tpf-card.tpf-card > .cover-img img{
  transition:transform .4s cubic-bezier(.2,.7,.2,1)!important}
 .mobx > section.cover.cover.cover.cover .tpf-rail > .tpf-card.tpf-card:hover > .cover-img img{
  transform:scale(1.05)!important}
}
/* the border was still the earlier rgb(229,224,213); Variety's .lcard border is
   rgba(20,20,22,.07). Re-asserted with the rail class repeated so it wins. */
@media(min-width:761px){
 .mobx > section.cover.cover.cover.cover .tpf-rail.tpf-rail > .tpf-card.tpf-card.tpf-card{
  border:1px solid rgba(20,20,22,.07)!important}
}

/* ---- THE ARTICLE TILE = Variety's .lcard, measured at 1512 -------------------
   TILE     458.67 x 391.25   radius 16   border 1px rgba(20,20,22,.07)
            shadow rgba(20,20,22,.08) 0 10px 26px   white   overflow hidden
            transition transform/box-shadow .28s cubic-bezier(.2,.7,.2,1)
   PICTURE  456.67 x 342.5  (4:3)  object-fit cover  object-position 50% 50%  radius 0
   CAPTION  46.75 tall  padding 11px 14px  serif 15/24.75  weight 400
            rgb(20,20,22)  no top border  transparent
   342.5 + 46.75 + two 1px borders = 391.25, so the tile is exact.
   The brief, the byline and READ THE STORY come off the tile: Variety's tile
   carries one line and nothing else, and the headline is that line.            */
@media(min-width:761px){
 .mobx > section.cover.cover.cover.cover .tpf-rail.tpf-rail > .tpf-card.tpf-card.tpf-card{
  height:391.25px!important;min-height:391.25px!important;max-height:391.25px!important}
 .mobx > section.cover.cover.cover.cover .tpf-rail > .tpf-card.tpf-card > .cover-img{
  height:342.5px!important}
 .mobx > section.cover.cover.cover.cover .tpf-rail > .tpf-card.tpf-card > .cover-img img{
  object-position:50% 50%!important}
 .mobx > section.cover.cover.cover.cover .tpf-rail > .tpf-card.tpf-card > .tpf-col{
  height:46.75px!important;padding:11px 14px!important;margin:0!important;
  display:block!important;overflow:hidden!important}
 .mobx > section.cover.cover.cover.cover .tpf-rail > .tpf-card.tpf-card > .tpf-col > h2{
  font:400 15px/24.75px "Iowan Old Style",Palatino,Georgia,Cambria,serif!important;
  letter-spacing:normal!important;color:rgb(20,20,22)!important;
  height:24.75px!important;margin:0!important;padding:0!important;
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
  display:block!important;-webkit-line-clamp:none!important}
 .mobx > section.cover.cover.cover.cover .tpf-rail > .tpf-card.tpf-card > .tpf-col > .dek,
 .mobx > section.cover.cover.cover.cover .tpf-rail > .tpf-card.tpf-card > .tpf-col > .byline,
 .mobx > section.cover.cover.cover.cover .tpf-rail > .tpf-card.tpf-card > .tpf-col > .readmore{
  display:none!important}
}
/* the feature's own card is stood down - the rail carries the three most recent */
.mobx > section.cover .tpf-rail > .tpf-card[data-tp-standdown]{display:none!important}
/* the caption's type was still the headline's 23/25.76 w600; Variety's tile line
   is 15/24.75 w400. Re-asserted with the column repeated so it wins. */
@media(min-width:761px){
 .mobx > section.cover.cover.cover.cover .tpf-rail > .tpf-card.tpf-card
  > .tpf-col.tpf-col.tpf-col > h2{
  font-family:"Iowan Old Style",Palatino,Georgia,Cambria,serif!important;
  font-size:15px!important;line-height:24.75px!important;font-weight:400!important;
  letter-spacing:normal!important;color:rgb(20,20,22)!important;height:24.75px!important}
}

/* ---- the tile keeps Variety's 458.67 x 391.25, and the body carries the
   headline AND the brief. The picture gives up the height the body needs, so the
   tile itself never changes size. Body type is set here; the picture's height is
   solved in tp-tilefit as 389.25 (the tile inside its two 1px borders) minus
   whatever the body measures. ------------------------------------------------ */
@media(min-width:761px){
 .mobx > section.cover.cover.cover.cover .tpf-rail > .tpf-card.tpf-card > .tpf-col{
  height:auto!important;padding:15px 18px 17px!important;display:block!important;
  overflow:hidden!important}
 .mobx > section.cover.cover.cover.cover .tpf-rail > .tpf-card.tpf-card
  > .tpf-col.tpf-col.tpf-col > h2{
  height:44px!important;margin:0 0 7px!important;
  overflow:hidden!important;white-space:normal!important;text-overflow:clip!important;
  display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important}
 .mobx > section.cover.cover.cover.cover .tpf-rail > .tpf-card.tpf-card > .tpf-col > .dek{
  display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;
  font:400 13.5px/20.5px "Iowan Old Style",Palatino,Georgia,Cambria,serif!important;
  color:rgb(74,71,64)!important;height:41px!important;margin:0 0 10px!important;
  overflow:hidden!important}
 .mobx > section.cover.cover.cover.cover .tpf-rail > .tpf-card.tpf-card > .tpf-col > .byline{
  display:block!important;
  font:700 10px/10px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  letter-spacing:2.4px!important;text-transform:uppercase!important;
  color:rgb(139,135,129)!important;margin:0 0 12px!important;height:10px!important}
 .mobx > section.cover.cover.cover.cover .tpf-rail > .tpf-card.tpf-card > .tpf-col > .readmore{
  display:inline-block!important;
  font:700 10px/10px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  letter-spacing:2.4px!important;text-transform:uppercase!important;color:rgb(20,20,22)!important;
  border-bottom:1px solid rgb(196,171,103)!important;padding-bottom:5px!important;margin:0!important}
}

/* ---- VARIETY'S DESKTOP SECTION HEAD, measured on its .pad at 1512 -----------
   eyebrow  DIV.eyebrow  box 19.80   12 / 19.8  w700  ls 2.5  rgb(196,171,103)
   title    H2.sec       box 25.75   23 / 25.76 w600  ls -0.3 rgb(20,20,22)
            -- the title's box starts ON the eyebrow's bottom edge: NO margin
               between them. The ink gap is 2.8, and it is leading, not spacing.
               Ours carried a 6.05 margin on the eyebrow, which is the air that
               made our head taller than Variety's.
   hint     on the eyebrow's own line, right rail
   24 from the title's baseline to the head block's bottom edge.               */
@media(min-width:761px){
 .mobx > section .tpsec-hd h2::before,
 .mobx > section .tpmore-hd h2::before,
 .mobx > section .tpg-hd h2::before{
  margin:0!important;line-height:19.8px!important;font-size:12px!important;
  letter-spacing:2.5px!important;font-weight:700!important;display:block!important}
}
/* The one real difference between the two heads, measured at 1512:
     Variety   eyebrow box 19.8 + margin 0    + title box 25.75 = head 45.55
     Position  eyebrow box 19.8 + margin 6.05 + title box 25.77 = head 51.61
   The 6.05 is the whole of it. Written at the weight of the mirror's own rules,
   which run 5 classes, because a lighter selector kept losing. */
@media(min-width:761px){
 .mobx.mobx.mobx.mobx.mobx > section .tpsec-hd h2::before,
 .mobx.mobx.mobx.mobx.mobx > section .tpmore-hd h2::before,
 .mobx.mobx.mobx.mobx.mobx > section .tpg-hd h2::before,
 .mobx.mobx.mobx.mobx.mobx section .tpsec-hd h2::before,
 .mobx.mobx.mobx.mobx.mobx section .tpmore-hd h2::before,
 .mobx.mobx.mobx.mobx.mobx section .tpg-hd h2::before{
  margin:0!important;margin-bottom:0!important;line-height:19.8px!important}
}

/* THE MASTHEAD'S HALFTONE - stood down while the review build is being
   diagnosed. It is the only change that coincided with the preview
   failing on the reviewer's machine, so it comes off first; it can be
   restored by deleting the .tp-nohalftone guard below.
   The rules are kept, gated behind a class that is never set. */
/* the masthead halftone is REMOVED. Both versions of it - the masked
   ::before, and the two-background rebuild - stopped the page painting
   below the banner on the reviewer's machine. The band is plain paper. */

/* ---- THE FEATURE CARD'S TYPE = Variety's .wcard, measured on both widths ----
   Variety at 1512 and at 393 uses the SAME type inside its card:
     body padding   16 at 1512, 15 at 393
     title          serif 16 / 17.6, w600, ls -0.3, rgb(20,20,22)
     meta line      sans  12 / 19.8, w400, ls normal, rgb(74,74,82)
     title base -> meta cap   7.59
   Ours was running the title at 16/22 w400 with no tracking on the desktop and
   18/22 on the phone, the meta as a 13.5 SERIF, the body padded 19 / 18, and the
   title-to-meta gap at 33.00 / 14.00 against Variety's 7.59.                   */
@media(min-width:761px){
 .mobx > section.cover.cover.cover.cover .tpf-rail > .tpf-card.tpf-card > .tpf-col{
  padding:15px 16px 16px!important}
 .mobx > section.cover.cover.cover.cover .tpf-rail > .tpf-card.tpf-card
  > .tpf-col.tpf-col.tpf-col > h2{
  font-family:"Iowan Old Style",Georgia,"Times New Roman",Times,serif!important;
  font-size:16px!important;line-height:17.6px!important;font-weight:600!important;
  letter-spacing:-.3px!important;color:rgb(20,20,22)!important;
  height:35.2px!important;margin:0!important}
 .mobx > section.cover.cover.cover.cover .tpf-rail > .tpf-card.tpf-card > .tpf-col > .dek{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  font-size:12px!important;line-height:19.8px!important;font-weight:400!important;
  letter-spacing:normal!important;color:rgb(74,74,82)!important;
  height:39.6px!important;margin:5.99px 0 0!important}
 .mobx > section.cover.cover.cover.cover .tpf-rail > .tpf-card.tpf-card > .tpf-col > .byline{
  margin:12px 0 0!important}
 .mobx > section.cover.cover.cover.cover .tpf-rail > .tpf-card.tpf-card > .tpf-col > .readmore{
  margin:12px 0 0!important}
}

/* ---- THE MASTHEAD IS A FIXED BOX ------------------------------------------
   No solver touches it. Desktop 415.2 tall, phone 317, content centred, and
   the band is defined here so it cannot collapse, empty out, or jump when the
   window is anything other than full screen. */
.mobx div.mast.mast.mast{
 box-sizing:border-box!important;
 display:flex!important;flex-direction:column!important;
 align-items:center!important;justify-content:center!important;
 text-align:center!important;
 height:auto!important;max-height:none!important;overflow:visible!important;
 border-bottom:1px solid rgb(20,20,22)!important}
/* Desktop: the band is Variety's 411 and the first painted line sits 89.8 below
   its top edge. That 89.8 used to be reached by a solver that collapsed the band
   to auto height, measured the ink and grew it back on every settle sweep - the
   words fell and snapped back in front of the reader every time the window
   changed. The number the solver converged to is 83.94 of padding, it does not
   depend on the window's width, so it is written here once and nothing measures
   it again. 83.94 + 5.86 (the block's box top to its painted cap) = 89.80. */
/* six classes: an earlier rule in this sheet sets padding-top on
   .mast.mast.mast.mast from --fix-mast, and another uses five. */
@media(min-width:761px){
 .mobx div.mast.mast.mast.mast.mast.mast{
  height:411px!important;min-height:411px!important;max-height:411px!important;
  justify-content:flex-start!important;
  padding-top:83.94px!important;padding-bottom:0!important}
}
@media(max-width:760px){
 .mobx div.mast.mast.mast{min-height:317px!important;padding:22px!important}
}

/* ---- THE DOT GROUND, site-wide, no mask -----------------------------------
   One background layer on the page itself: 1px dots on a 7px pitch. No mask, no
   pseudo-element, no compositing layer - the thing that stopped the page
   painting. The white sections sit on top of it, so the ground shows through
   the paper bands and around the cards. */
/* .mobx paints an opaque white over the page, so the ground has to go ON the
   bands themselves rather than behind them. Every paper band on every page type
   carries it - home masthead, page mastheads, the games head, article heads. */
.mobx div.mast.mast.mast,
.mobx div.pmast.pmast.pmast,
.mobx section.tpgh.tpgh.tpgh,
.mobx div.art.art.art{
 background-color:#f4f3f1!important;
 background-image:radial-gradient(rgba(20,20,22,.11) 1px, rgba(20,20,22,0) 1.45px)!important;
 background-size:7px 7px!important;
 background-position:center center!important;
 background-repeat:repeat!important}

/* THE DOT GROUND. The dots are not a full bleed: they gather in the middle of
   the band and fade away before the edges, so the wordmark sits on a ground
   rather than on wallpaper. The pattern rides on a ::before UNDER the words and
   the mask is on that layer only - masking the band itself put the text inside a
   masked compositing layer, which is what made the type go soft and the banner
   drop out of the preview the first time this was tried.
   Longhand only, and written last: earlier rules in this sheet use a
   `background:` SHORTHAND, and a shorthand resets background-image to none. */
.mobx.mobx.mobx div.mast.mast.mast.mast,
.mobx.mobx.mobx div.pmast.pmast.pmast.pmast,
.mobx.mobx.mobx section.tpgh.tpgh.tpgh.tpgh,
.mobx.mobx.mobx div.art.art.art.art{
 position:relative!important;
 background-color:#f4f3f1!important;
 background-image:none!important}

/* the words ride above the ground, and are never inside the masked layer */
.mobx.mobx.mobx div.mast.mast.mast.mast > *,
.mobx.mobx.mobx div.pmast.pmast.pmast.pmast > *,
.mobx.mobx.mobx section.tpgh.tpgh.tpgh.tpgh > *,
.mobx.mobx.mobx div.art.art.art.art > *{position:relative!important;z-index:1!important}

/* the feature card that the rail stands down leaves a loose <br> behind as a
   direct child of the section - 17px of nothing between the dots and the
   section end that the E solver was paying for out of its padding. */
section.cover > br{display:none!important}


/* ===========================================================================
   PUZZLES - OPTION C, MARKS ON PAPER. Desktop only.
   The box goes: no border, no radius, no shadow. Each puzzle shows its own
   drawn mark on a paper panel, and the picture does the work the outline was
   doing. The artwork already exists in the markup as .tpg-art and was turned
   off; it is turned back on here at the size the panel wants.
   Written at six classes because two earlier blocks in this sheet set
   .tpg-item.tpg-item padding and display with !important, and another turns
   .tpg-art off entirely.
   =========================================================================== */
@media(min-width:761px){
 .mobx section.tpgames.tpgames .tpg-grid.tpg-grid.tpg-grid.tpg-grid{gap:22px!important}

 .mobx section.tpgames.tpgames a.tpg-item.tpg-item.tpg-item.tpg-item.tpg-item{
  display:flex!important;flex-direction:column!important;align-items:stretch!important;
  border:0!important;border-width:0!important;border-style:none!important;
  border-radius:0!important;box-shadow:none!important;
  background:none!important;background-color:transparent!important;
  padding:0!important;margin:0!important;height:auto!important;min-height:0!important;
  text-decoration:none!important;color:inherit!important;overflow:visible!important}

 .mobx section.tpgames.tpgames a.tpg-item.tpg-item.tpg-item .tpg-art.tpg-art.tpg-art{
  order:1!important;display:flex!important;align-items:center!important;
  justify-content:center!important;
  width:100%!important;height:150px!important;min-height:150px!important;
  margin:0 0 16px!important;padding:0!important;
  background:#e6e3de!important;overflow:hidden!important;align-self:stretch!important;   /* Variety's band colour, 2026-09-17 - was #f0eee9, a shade off the white behind it */
  transition:background .28s cubic-bezier(.2,.7,.2,1)!important}
 .mobx section.tpgames.tpgames a.tpg-item.tpg-item.tpg-item .tpg-art.tpg-art.tpg-art svg{
  display:block!important;width:104px!important;height:104px!important;max-width:none!important;
  transition:transform .5s cubic-bezier(.2,.6,.2,1)!important}

 .mobx section.tpgames.tpgames a.tpg-item.tpg-item.tpg-item .tpg-mark.tpg-mark{display:none!important}

 .mobx section.tpgames.tpgames a.tpg-item.tpg-item.tpg-item .tpg-n.tpg-n.tpg-n{
  order:2!important;display:block!important;
  font:600 20px/24px "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif!important;
  letter-spacing:-.3px!important;color:#141416!important;margin:0 0 6px!important;
  transition:color .2s!important}
 .mobx section.tpgames.tpgames a.tpg-item.tpg-item.tpg-item .tpg-d.tpg-d.tpg-d{
  order:3!important;display:block!important;
  font:400 14px/21px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  letter-spacing:normal!important;color:#4a4a52!important;margin:0!important}

 /* HOVER: the mark lifts and tilts, which is the animation this section has
    always had - translateY(-6px) rotate(-3deg) over .5s. Option C had replaced
    it with a flat scale, which read as a zoom instead of a nudge. */
 .mobx section.tpgames.tpgames a.tpg-item.tpg-item.tpg-item .tpg-art.tpg-art svg{
  transition:transform .5s cubic-bezier(.2,.6,.2,1)!important}
 .mobx section.tpgames.tpgames a.tpg-item.tpg-item.tpg-item:hover .tpg-art.tpg-art.tpg-art{background:#dcd8d1!important}
 .mobx section.tpgames.tpgames a.tpg-item.tpg-item.tpg-item:hover .tpg-art.tpg-art svg{
  transform:translateY(-6px) rotate(-3deg)!important}
 .mobx section.tpgames.tpgames a.tpg-item.tpg-item.tpg-item:hover .tpg-n.tpg-n{color:#876c22!important}
}

/* Option C, the two things the new display broke.
   1. The home shelf carries four, not eight. `display:flex` on every .tpg-item
      overrode the rule that hides the rest, so all eight came back.
   2. The cards were on an older staggered layout - margin-top 0 / 56 / 22 / 78
      and four different mark sizes. On a paper panel they line up. */
@media(min-width:761px){
 /* The home shelf carries four. Reverted 2026-09-18: the client wants four
    here, not all eight - the eight live on the Puzzles page. */
 .mobx section.tpgames[data-shelf="home"] .tpg-grid > a.tpg-item.tpg-item.tpg-item.tpg-item.tpg-item:nth-child(n+5){
  display:none!important}
 .mobx section.tpgames.tpgames .tpg-grid > a.tpg-item.tpg-item.tpg-item.tpg-item{
  margin-top:0!important}
 .mobx section.tpgames.tpgames .tpg-grid > a.tpg-item.tpg-item.tpg-item .tpg-art.tpg-art.tpg-art svg{
  width:104px!important;height:104px!important}
 /* PLAY is a pseudo on the card and was landing between the name and the line */
 .mobx section.tpgames.tpgames .tpg-grid > a.tpg-item.tpg-item.tpg-item::after,
 .mobx section.tpgames.tpgames .tpg-grid > a.tpg-item.tpg-item.tpg-item .tpg-n::after{
  order:4!important;margin-top:14px!important}
}

/* THE DOUBLE HAIRLINE. The masthead carries a bottom border AND the first
   section carries its own top border, and they stack: the first divider on the
   page painted 466.0 -> 468.0, TWO pixels, where every other divider on the page
   is one (870.0 -> 871.0). That is why the first section's orange line measured
   48.75 against 47.75 everywhere else with identical padding - the scanner, and
   the eye, were starting from a line that begins a pixel higher.
   The section's own rule is the one that stays. */
.mobx div.mast.mast.mast.mast.mast.mast{border-bottom:0!important}


/* ===========================================================================
   THE HEADER NAV = VARIETY'S. Measured on Variety at 1512:

     links        12.5 / 12.5  w600  ls 0.75  sentence case
                  rgb(92,88,79), and rgb(20,20,22) on the page you are on
     gaps         32 between links, 38 before the button
     button       28 tall, 11.8 / 11.8 w600 ls 0.708, radius 99, #c4ab67
     right edge   46

   The Position was running 10.5 / 10.5 w700 ls 2.4 in capitals, all of them
   black, with no gap between links (the air was padding inside them) and a
   32 tall button. Same information, a much louder voice. An earlier block in
   this sheet already carried Variety's numbers and a later one overwrote it,
   so this is written last and at a weight neither can reach.
   =========================================================================== */
@media(min-width:761px){
 .mobx header .tpnav.tpnav.tpnav{
  display:flex!important;align-items:center!important;gap:32px!important;margin-left:auto!important}

 .mobx header .tpnav.tpnav.tpnav a:not(.tpnav-cta){
  font:600 12.5px/12.5px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  letter-spacing:.75px!important;text-transform:none!important;
  color:rgb(92,88,79)!important;padding:0!important;margin:0!important;
  text-decoration:none!important;transition:color .18s!important}
 .mobx header .tpnav.tpnav.tpnav a:not(.tpnav-cta):hover{color:#141416!important}
 /* the page you are on is the only black one, the way Variety marks it */
 .mobx header .tpnav.tpnav.tpnav a[aria-current="page"]{color:rgb(20,20,22)!important}

 .mobx header .tpnav.tpnav.tpnav a.tpnav-cta.tpnav-cta{
  margin-left:6px!important;                 /* 32 of gap + 6 = Variety's 38 */
  height:28px!important;min-height:28px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  padding:0 14px!important;
  font:600 11.8px/11.8px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  letter-spacing:.708px!important;text-transform:none!important;
  border-radius:99px!important;background:#c4ab67!important;color:#fff!important;border:0!important}
 .mobx header .tpnav.tpnav.tpnav a.tpnav-cta.tpnav-cta:hover{background:#b89947!important}
}

/* Variety also draws a 2px orange bar under the page you are on: an ::after,
   absolutely placed, the full width of the word, 5.2 below its painted bottom. */
@media(min-width:761px){
 .mobx header .tpnav.tpnav.tpnav a:not(.tpnav-cta){position:relative!important}
 .mobx header .tpnav.tpnav.tpnav a[aria-current="page"]::after{
  content:""!important;position:absolute!important;
  left:0!important;right:0!important;bottom:-7.75px!important;
  height:2px!important;background:#c4ab67!important;
  border:0!important;margin:0!important;padding:0!important;
  display:block!important;width:auto!important;transform:none!important;opacity:1!important}
}

/* === header brand mark, measured off Variety 2026-09-16 ===
   VP: mark 33x33 at x46 y11, radius 8px; painted wordmark starts at 87.25 */
@media(min-width:761px){
 .mobx header .brand .ic.ic.ic.ic,
 .mobx header .lg .ic.ic.ic.ic{
  display:inline-block!important;
  width:33px!important;height:33px!important;
  min-width:33px!important;flex:0 0 33px!important;
  border-radius:8px!important;
  font-size:0!important;line-height:0!important;color:transparent!important;
  text-indent:-9999px!important;overflow:hidden!important;
  margin:0 8px 0 0!important;padding:0!important;
  background-color:transparent!important;
  background-image:url("data:image/png;base64,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")!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
  background-size:contain!important;
 }
 .mobx header .brand > a,
 .mobx header .lg > a{display:inline-flex!important;align-items:center!important}
 .mobx header .brand{align-items:center!important}
}

/* === hero rule = the favicon's rule, scaled to the masthead P (measured 2026-09-16) ===
   favicon: P 192px tall, rule 114 x 28, gap 10 under the baseline, centred on the P's foot
   hero P measured 74.25 tall -> k = 74.25 / 192 = 0.386719
   so the rule becomes 114k = 44.09 wide and 28k = 10.83 thick, on the P's foot centre.
   Painted by ::after so the element keeps its old 70x4 flow box and no spacing moves. */
@media(min-width:761px){
 .mobx>.mast .tpm .tpm-rule.tpm-rule.tpm-rule,
 .mobx .tpm .tpm-rule.tpm-rule.tpm-rule{position:relative!important;background:transparent!important;background-color:transparent!important;background-image:none!important}
 .mobx>.mast .tpm .tpm-rule.tpm-rule.tpm-rule::after,
 .mobx .tpm .tpm-rule.tpm-rule.tpm-rule::after{
  content:""!important;position:absolute!important;
  left:var(--rl,0px)!important;top:var(--rt,0px)!important;
  width:var(--rw,44.09px)!important;height:var(--rh,10.83px)!important;
  background:#c4ab67!important;border-radius:0!important;
 }
}

/* === banner: orange rule removed, the three lines spaced evenly (measured 2026-09-16) ===
   painted ink: eyebrow 9.00, plate 81.25, lead 17.00, block runs 146.00 -> 349.75 = 203.75
   203.75 - 107.25 of ink = 96.50 over two gaps = 48.25 each.
   plate margin-top 23.813 -> 40.56 ; lead 23 -> 40.25 (it also absorbs the rule's 34px of flow)
   block top and bottom are unchanged, so nothing below the masthead moves. */
@media(min-width:761px){
 .mobx>.mast .tpm .tpm-rule.tpm-rule.tpm-rule{display:none!important}
}

/* the masthead plate, 10% then 5% larger: 84 -> 92.40 -> 97.02. the banner solver re-evens the two
   gaps and re-centres the block in the 411px band off the new ink. */
@media(min-width:761px){
 .mobx>.mast .tpm .dm-plate.dm-plate.dm-plate{height:97.02px!important;width:auto!important;max-width:calc(calc(100 * var(--vw, 1vw)) - 92px)!important}
}

/* the three banner lines optically centred, measured from the painted ink at 4x:
   eyebrow 754.38, plate 756.12, lead 756.62 against the page centre 756.00.
   the eyebrow's 2.99px letter-spacing leaves a trailing gap after the last letter,
   which drags its ink left; the other two are glyph sidebearing and the plate PNG's
   own margins. position:relative only paints - it changes no layout. */
@media(min-width:761px){
 .mobx>.mast .tpm .tpm-eyebrow.tpm-eyebrow.tpm-eyebrow{position:relative!important;left:1.62px!important}
 .mobx>.mast .tpm .dm-plate.dm-plate.dm-plate{position:relative!important;left:-0.12px!important}
 .mobx>.mast .tpm .tpm-lead.tpm-lead.tpm-lead{position:relative!important;left:-0.62px!important}
}

/* 761-900, measured off Variety at the same widths: its hero steps 411 -> 361 and
   its headline 40px -> 34px, a factor of 0.85. So the band is 361 here and the
   wordmark is 97.02 x 0.85 = 82.47. The banner solver centres it in the new band. */
@media(min-width:761px) and (max-width:760px){
 .mobx.mobx.mobx > div.mast.mast.mast.mast{
  height:361px!important;min-height:361px!important;max-height:361px!important;
  display:flex!important;flex-direction:column!important;
  align-items:center!important;justify-content:flex-start!important;
  padding-left:46px!important;padding-right:46px!important;
 }
 .mobx>.mast .tpm .dm-plate.dm-plate.dm-plate{height:82.47px!important}
}
@media(min-width:761px) and (max-width:760px){
 html body .mobx.mobx.mobx > div.mast.mast.mast.mast.mast{padding-top:115.68px!important}
}
/* the three lines in the 761-900 band. mobile.js owns margins below 901, so the
   runtime solver's writes get clobbered there - these are the same numbers it
   would have produced, held in CSS instead. The desktop gap is 31.59 in a 411
   band; scaled by 361/411 it is 27.75 here. */
@media(min-width:761px) and (max-width:760px){
 html body .mobx.mobx.mobx > div.mast .tpm .dm-plate.dm-plate.dm-plate.dm-plate{margin-top:20.05px!important}
 html body .mobx.mobx.mobx > div.mast .tpm .tpm-lead.tpm-lead.tpm-lead.tpm-lead{margin-top:19.55px!important}
 html body .mobx.mobx.mobx > div.mast .tpm .tpm-eyebrow.tpm-eyebrow.tpm-eyebrow.tpm-eyebrow{margin-top:48.78px!important}
}

/* the stat rail on archive / featured / puzzles was computing position:relative,
   so the left/right the solver writes were read as a 898px SHIFT of an in-flow
   1420px box: it started at x=944 and ran to 2364, ~850 off the right edge of a
   1512 window, and the parent's overflow:hidden ate it. It is meant to be
   absolute inside the banner. */
@media(min-width:761px){
 .mobx.mobx.mobx div.pmast.pmast.pmast.pmast > aside.tp-rail.tp-rail,
 .mobx.mobx.mobx section.tpgh.tpgh.tpgh.tpgh > aside.tp-rail.tp-rail,
 .mobx.mobx.mobx div.art.art.art.art > aside.tp-rail.tp-rail,
 .mobx.mobx.mobx div.mast.mast.mast.mast > aside.tp-rail.tp-rail{position:absolute!important}
}

/* === section banners matched to Variety's, measured at 4x on work.html ===
   band 411 | eyebrow #c4ab67 16/26.4 700 ls2.5 | h1 40/44.8 600 Iowan ls-0.3
   sub 22/30.14 Iowan 400 | rule 64 x 3 | lead 16/24 400 sans
   caps from the band's top: 90.8 / 133.2 / 190 / rule 242.1 / lead 267.1 */
@media(min-width:761px){
 .mobx div.pmast.pmast.pmast.pmast,
 .mobx section.tpgh.tpgh.tpgh.tpgh{min-height:411px!important;height:411px!important}
 .mobx div.pmast .eyebrow.eyebrow.eyebrow,
 .mobx section.tpgh .eyebrow.eyebrow.eyebrow,
 .mobx section.tpgh .tpgh-eyebrow.tpgh-eyebrow.tpgh-eyebrow{
  color:#876c22!important;
  font:700 16px/26.4px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  letter-spacing:2.5px!important;text-transform:uppercase!important}
 .mobx div.pmast .pm-sub.pm-sub.pm-sub,
 .mobx section.tpgh .pm-sub.pm-sub.pm-sub{
  font:400 22px/30.14px var(--tp-serif)!important}
 .mobx div.pmast > p.p.p, .mobx div.pmast p:not(.pm-sub){
  font:400 16px/24px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important}
}
@media(min-width:761px){
 .mobx div.pmast .pm-rule.pm-rule.pm-rule,
 .mobx section.tpgh .pm-rule.pm-rule.pm-rule{display:block!important;width:64px!important;height:3px!important;
  border-radius:99px!important;background:#c4ab67!important}
}
@media(min-width:761px){
 html body .mobx.mobx div.pmast i.pm-rule.pm-rule.pm-rule.pm-rule,
 html body .mobx.mobx section.tpgh i.pm-rule.pm-rule.pm-rule.pm-rule{
  display:block!important;width:64px!important;height:3px!important;min-height:3px!important;
  max-height:3px!important;border-radius:99px!important;background:#c4ab67!important;
  font-size:0!important;line-height:0!important}
}
/* the home banner's eyebrow takes Variety's orange, same as the section banners */
@media(min-width:761px){
 .mobx>.mast .tpm .tpm-eyebrow.tpm-eyebrow.tpm-eyebrow.tpm-eyebrow{color:#876c22!important}
}

/* the section banner's type is driven by custom properties (--peyebrow / --psub /
   --plead). Variety's own values, read off work.html at 4x, are eyebrow 16/26.4
   ls2.5, sub 22/30.14, lead 16/24 - so set the variables on the band itself and
   every existing rule inherits the right size. */
@media(min-width:761px){
 .mobx div.pmast, .mobx section.tpgh{
  --peyebrow:16px; --peyebrow-lh:26.4px; --peyebrow-ls:2.5px;
  --psub:22px;     --psub-lh:30.14px;
  --plead:16px;    --plead-lh:24px;
 }
}

/* the dot ground runs right under the two small lines in the home banner and
   eats them. A soft blurred plate of the paper colour sits behind each one -
   no edge, just the dots fading out under the words. */
@media(min-width:761px){
 .mobx>.mast .tpm .tpm-eyebrow.tpm-eyebrow.tpm-eyebrow,
 .mobx>.mast .tpm .tpm-lead.tpm-lead.tpm-lead{position:relative!important;isolation:isolate!important}
 .mobx>.mast .tpm .tpm-eyebrow.tpm-eyebrow.tpm-eyebrow::before,
 .mobx>.mast .tpm .tpm-lead.tpm-lead.tpm-lead::before{
  content:""!important;position:absolute!important;z-index:-1!important;
  left:-16px!important;right:-16px!important;top:-5px!important;bottom:-5px!important;
  background:rgba(244,243,241,.55)!important;
  filter:blur(13px)!important;border-radius:999px!important;pointer-events:none!important;
 }
}

/* the band's own padding solver and the Variety-line solver both write on load,
   and the reader was seeing the intermediate frames as a jump. Hold the band
   for one beat, then fade it in settled. Failsafe below removes this no matter
   what, so it can never stay hidden. */
@media(min-width:761px){
 .mobx div.pmast, .mobx section.tpgh{transition:opacity .2s ease!important}
 .mobx div.pmast.tp-settling, .mobx section.tpgh.tp-settling{opacity:0!important}
}

/* ============================================================================
   VARIETY'S BANNER, COPIED. Lifted from vpfixes.css on work.html, class for
   class. No solver touches .vpban - banVP, the band solver and centreInk all
   return early on it. Only the words are different.
     411 box, flex column, justify-content CENTER, gutter 46
     eyebrow 16 / ls 2.5           h1 40 / ls -0.3 / margin-top 16
     sub     22 / lh 1.37 / mt 12  rule 64 x 3 / mt 22
     lead    16 / lh 1.5  / mt 22  first child mt -4.15 (Variety's optical nudge)
   ========================================================================== */
@media(min-width:761px){
 html body .mobx.mobx .vpban.vpban.vpban.vpban.vpban{
  min-height:411px!important;height:411px!important;
  display:flex!important;flex-direction:column!important;
  justify-content:flex-start!important;align-items:flex-start!important;
  text-align:left!important;
  padding:90.8px 46px 0!important;
  position:relative!important;overflow:hidden!important;
 }
 html body .mobx.mobx .vpban.vpban.vpban.vpban.vpban > *{align-self:stretch!important;flex:0 0 auto!important}
 /* the puzzles page wraps the same five lines in .tpgh-in > .tpgh-say, so the
    > child rules missed them and its lead sat 6px high against archive and
    featured. display:contents dissolves the wrappers - same structure now. */
 html body .mobx.mobx .vpban.vpban.vpban.vpban.vpban > .tpgh-in,
 html body .mobx.mobx .vpban.vpban.vpban.vpban.vpban .tpgh-say{display:contents!important}
 html body .mobx.mobx .vpban.vpban.vpban.vpban.vpban p{
  display:block!important;order:5!important;
  font:400 16px/24px var(--tp-sans)!important;letter-spacing:normal!important;
  color:#4a4a52!important;margin:22.0px 0 0!important;padding:0!important;max-width:none!important}
 html body .mobx.mobx .vpban.vpban.vpban.vpban.vpban > *:first-child{margin-top:-4.15px!important}
 html body .mobx.mobx .vpban.vpban.vpban.vpban.vpban > aside.tp-rail{align-self:auto!important;flex:none!important;margin-top:0!important}

 html body .mobx.mobx .vpban.vpban.vpban.vpban.vpban .eyebrow,
 html body .mobx.mobx .vpban.vpban.vpban.vpban.vpban .tpgh-eyebrow{
  display:block!important;order:1!important;
  font:700 16px/26.4px var(--tp-sans)!important;letter-spacing:2.5px!important;
  text-transform:uppercase!important;color:#876c22!important;
  margin:0!important;padding:0!important}

 html body .mobx.mobx .vpban.vpban.vpban.vpban.vpban h1{
  display:block!important;order:2!important;
  font:600 40px/44.8px var(--tp-serif)!important;letter-spacing:-0.3px!important;
  color:#141416!important;margin:16.0px 0 0!important;padding:0!important;max-width:none!important}

 html body .mobx.mobx .vpban.vpban.vpban.vpban.vpban .pm-sub,
 html body .mobx.mobx .vpban.vpban.vpban.vpban.vpban .tpgh-sub{
  display:block!important;order:3!important;
  font:400 22px/30.14px var(--tp-serif)!important;letter-spacing:normal!important;
  color:#4a4a52!important;margin:12.0px 0 0!important;padding:0!important}

 html body .mobx.mobx .vpban.vpban.vpban.vpban.vpban .pm-rule{
  display:block!important;order:4!important;
  width:64px!important;height:3px!important;min-height:3px!important;max-height:3px!important;
  background:#c4ab67!important;border-radius:99px!important;
  margin:22.0px 0 0!important;padding:0!important;font-size:0!important;line-height:0!important}

 html body .mobx.mobx .vpban.vpban.vpban.vpban.vpban > p{
  display:block!important;order:5!important;
  font:400 16px/24px var(--tp-sans)!important;letter-spacing:normal!important;
  color:#4a4a52!important;margin:22.0px 0 0!important;padding:0!important;max-width:none!important}
}

/* ============================================================================
   THE COLUMN, MEASURED ON THE LIVE VARIETY SITE at 1512 / 1728 / 1920
     header mark      46 / 70 / 166   max(46, calc(50 * var(--vw, 1vw)) - 794)
     banner text      46 / 46 / 46    flat
     section headings 46 / 70 / 166   the formula
     cards            46 / 70 / 166   the formula
     footer           46 / 46 / 46    flat
   The Position capped every wrapper at 1440 and centred it: header at 144 and
   sections at 46 on a 1728 screen (16-inch MacBook Pro, full screen) against
   Variety's 70 and 70. The SECTION carries the inset now, its inner wrappers
   carry none, and the banners and footer stay on 46.
   ========================================================================== */
@media(min-width:761px){
 html body div.mobx.mobx.mobx > section:not(.tpgh):not(.vpban){
  padding-left:max(46px,calc(calc(50 * var(--vw, 1vw)) - 794px))!important;
  padding-right:max(46px,calc(calc(50 * var(--vw, 1vw)) - 794px))!important}
 html body div.mobx.mobx.mobx > section:not(.tpgh) > .tpg-in,
 html body div.mobx.mobx.mobx > section:not(.tpgh) > .tpmore-in,
 html body div.mobx.mobx.mobx > section:not(.tpgh) > .tpsay-in,
 html body div.mobx.mobx.mobx > section:not(.tpgh) > .wrap,
 html body div.mobx.mobx.mobx > section:not(.tpgh) > .fwrap,
 html body div.mobx.mobx.mobx > section:not(.tpgh) > .awrap,
 html body div.mobx.mobx.mobx > div.pbody > .wrap,
 html body div.mobx.mobx.mobx > div.abody > .wrap{
  box-sizing:border-box!important;width:100%!important;max-width:none!important;
  margin-left:0!important;margin-right:0!important;
  padding-left:0!important;padding-right:0!important}
 html body div.mobx.mobx.mobx > div.pbody, html body div.mobx.mobx.mobx > div.abody{
  padding-left:max(46px,calc(calc(50 * var(--vw, 1vw)) - 794px))!important;
  padding-right:max(46px,calc(calc(50 * var(--vw, 1vw)) - 794px))!important}
 footer.tpfoot .tpf-in.tpf-in{max-width:none!important;margin:0!important;
  padding-left:46px!important;padding-right:46px!important}
}
@media(min-width:761px){
 /* the header takes Variety's formula in CSS, so it is right the instant the
    window changes size - no sweep to wait for */
 html body div.mobx.mobx.mobx > header .nav.nav.nav{
  box-sizing:border-box!important;width:100%!important;max-width:none!important;
  margin-left:0!important;margin-right:0!important;
  padding-left:max(46px,calc(calc(50 * var(--vw, 1vw)) - 794px))!important;
  padding-right:max(46px,calc(calc(50 * var(--vw, 1vw)) - 794px))!important}
 html body div.mobx.mobx.mobx > header{padding-left:0!important;padding-right:0!important}
}

/* ============================================================================
   VARIETY'S SECTION HEAD, COPIED - the shared component `.arc-hd`.
   Measured live on varietypartners.com/onboard at 1512/dpr2 off its `.vpsh`:
     grid, columns 1fr auto, gap 0 22, align-items start, position relative
     padding-bottom 24, margin-bottom 26
     eyebrow  700 12/19.8 sans, ls 2.5, uppercase, #c4ab67, margin-left -0.5
     h2       600 23/25.76 Iowan, ls -0.3, #141416, MARGIN-TOP 6.05, ml -0.5
     hint     400 12/19.8 sans, ls 1.6, uppercase, #9a9488, margin-right -2
     ::after  hairline - absolute, left 0 right 0 bottom 0, 1px #d8d2c6
   Markup:
     <div class="arc-hd">
       <div class="arc-eyebrow">Orange words</div>
       <h2>Title</h2>
       <div class="acount">grey, on the right</div>
     </div>
   The DOM order is eyebrow / h2 / hint; the grid places the hint back up on
   row 1, which is how Variety does it. tp-secfit's hdOf() includes .arc-hd, so
   a band carrying this head is solved on the head's BOX like every other one.
   ========================================================================== */
@media(min-width:761px){
 html body .mobx .arc-hd.arc-hd{display:grid!important;
  grid-template-columns:1fr auto!important;gap:0 22px!important;align-items:start!important;
  position:relative!important;width:100%!important;padding:0 0 24px!important;margin:0 0 26px!important}
 html body .mobx .arc-hd.arc-hd::after{content:""!important;display:block!important;position:absolute!important;
  left:0!important;right:0!important;bottom:0!important;height:1px!important;background:#d8d2c6!important}
 html body .mobx .arc-hd.arc-hd::before{content:none!important;display:none!important}
 html body .mobx .arc-hd.arc-hd .arc-eyebrow{grid-column:1!important;grid-row:1!important;
  font:700 12px/19.8px var(--tp-sans)!important;letter-spacing:2.5px!important;
  text-transform:uppercase!important;color:#876c22!important;margin:0 0 0 -0.5px!important;padding:0!important}
 html body .mobx .arc-hd.arc-hd h2{grid-column:1!important;grid-row:2!important;
  margin:6.05px 0 0 -0.5px!important;padding:0!important;display:block!important;max-width:none!important;
  font:600 23px/25.76px var(--tp-serif)!important;letter-spacing:-.3px!important;color:#141416!important}
 html body .mobx .arc-hd.arc-hd h2::before{content:none!important;display:none!important}
 html body .mobx .arc-hd.arc-hd h2::after{content:none!important;display:none!important}
 html body .mobx .arc-hd.arc-hd .acount,
 html body .mobx .arc-hd.arc-hd .tplab{grid-column:2!important;grid-row:1!important;position:static!important;
  font:400 12px/19.8px var(--tp-sans)!important;letter-spacing:1.6px!important;white-space:nowrap!important;
  text-transform:uppercase!important;color:#9a9488!important;margin:0 -2px 0 0!important;padding:0!important}
}
@media(max-width:760px){
 html body .mobx .arc-hd.arc-hd{display:grid!important;
  grid-template-columns:1fr auto!important;gap:0 14px!important;align-items:start!important;
  position:relative!important;width:100%!important;padding:0 0 18px!important;margin:0 0 20px!important}
 html body .mobx .arc-hd.arc-hd::after{content:""!important;display:block!important;position:absolute!important;
  left:0!important;right:0!important;bottom:0!important;height:1px!important;background:#d8d2c6!important}
 html body .mobx .arc-hd.arc-hd .arc-eyebrow{grid-column:1!important;grid-row:1!important;
  font:700 11px/18px var(--tp-sans)!important;letter-spacing:2.2px!important;
  text-transform:uppercase!important;color:#876c22!important;margin:0!important}
 html body .mobx .arc-hd.arc-hd h2{grid-column:1/-1!important;grid-row:2!important;margin:6px 0 0!important;
  font:600 21px/24px var(--tp-serif)!important;letter-spacing:-.3px!important;color:#141416!important}
 html body .mobx .arc-hd.arc-hd h2::before{content:none!important;display:none!important}
 html body .mobx .arc-hd.arc-hd .acount,
 html body .mobx .arc-hd.arc-hd .tplab{grid-column:2!important;grid-row:1!important;position:static!important;
  font:400 11px/18px var(--tp-sans)!important;letter-spacing:1.2px!important;white-space:nowrap!important;
  text-transform:uppercase!important;color:#9a9488!important;margin:0!important}
}

/* ============================================================================
   GET FEATURED, MIRRORED ON VARIETY'S ONBOARD PAGE.
   Measured live on varietypartners.com/onboard at 1512/dpr2:
     band 1 `.steps`  head (.vpsh) -> 26 -> four cards in a grid, gap 22
                      card 338.5 wide, padding 22, bg #fff, 1px #e5e0d5,
                      radius 18, shadow 0 4px 12px rgba(20,20,22,.06)
                      number 12/12 700 ls-0.24 Iowan #c4ab67, margin-bottom 6
     band 2 `.fsec`   head (.vpsh) -> 26 -> the form, 700 WIDE AND CENTRED,
                      radius 20, bg #fff, shadow 0 18px 34px -10 rgba(20,20,22,.18)
                      then a note, 12/19.2, centred, margin-top 15
   The two columns side by side are gone: the offers are the card row, the form
   is its own band under its own head, exactly as Variety stacks them.
   ========================================================================== */
@media(min-width:761px){
 /* --- band 1: the four formats as cards ------------------------------- */
 html body .mobx ol.facc.fcards{display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;gap:22px!important;
  list-style:none!important;margin:0!important;padding:0!important;width:100%!important;
  counter-reset:none!important}
 html body .mobx ol.facc.fcards > li{display:block!important;margin:0!important;
  padding:22px!important;background:#ffffff!important;border:1px solid #e5e0d5!important;
  border-radius:18px!important;box-shadow:0 4px 12px rgba(20,20,22,.06)!important;
  cursor:default!important}
 html body .mobx ol.facc.fcards > li::before,
 html body .mobx ol.facc.fcards > li::after{content:none!important;display:none!important}
 html body .mobx ol.facc.fcards > li .fn{display:block!important;
  font:700 12px/12px var(--tp-serif)!important;letter-spacing:-.24px!important;
  color:#876c22!important;margin:0 0 6px!important;padding:0!important;
  width:auto!important;height:auto!important;border:0!important;border-radius:0!important;
  background:none!important;text-align:left!important;position:static!important}
 html body .mobx ol.facc.fcards > li .ft{display:block!important;margin:0!important;padding:0!important}
 html body .mobx ol.facc.fcards > li .ft b{display:block!important;
  font:600 17px/1.25 var(--tp-serif)!important;letter-spacing:-.2px!important;
  color:#141416!important;margin:0 0 6px!important}
 html body .mobx ol.facc.fcards > li .ft i{display:block!important;font-style:normal!important;
  font:400 14px/21px var(--tp-sans)!important;color:#4a4a52!important;
  max-height:none!important;overflow:visible!important;opacity:1!important}
 html body .mobx section.fsec-a .fmini{display:block!important;
  font:400 14px/21px var(--tp-sans)!important;color:#4a4a52!important;
  margin:26px 0 0!important;padding:0!important;max-width:62em!important;border:0!important}

 /* --- band 2: the form, centred like Variety's -------------------------- */
 html body .mobx section.fsec-b .fbox{width:700px!important;max-width:100%!important;
  margin:0 auto!important;padding:28px!important;background:#ffffff!important;
  border:1px solid #ffffff!important;border-radius:20px!important;
  box-shadow:0 18px 34px -10px rgba(20,20,22,.18)!important}
 html body .mobx section.fsec-b .fbox .lbl2{display:none!important}
 html body .mobx section.fsec-b .fnote{display:block!important;text-align:center!important;
  font:400 12px/19.2px var(--tp-sans)!important;color:#4a4a52!important;
  margin:15px auto 0!important;padding:0!important;width:100%!important}
}
@media(max-width:760px){
 html body .mobx ol.facc.fcards{display:block!important;list-style:none!important;
  margin:0!important;padding:0!important}
 html body .mobx ol.facc.fcards > li{display:block!important;margin:0 0 14px!important;
  padding:18px!important;background:#ffffff!important;border:1px solid #e5e0d5!important;
  border-radius:16px!important;box-shadow:0 4px 12px rgba(20,20,22,.06)!important}
 html body .mobx ol.facc.fcards > li::before,
 html body .mobx ol.facc.fcards > li::after{content:none!important;display:none!important}
 html body .mobx ol.facc.fcards > li .fn{display:block!important;
  font:700 12px/12px var(--tp-serif)!important;letter-spacing:-.24px!important;
  color:#876c22!important;margin:0 0 6px!important;padding:0!important;
  width:auto!important;height:auto!important;border:0!important;background:none!important}
 html body .mobx ol.facc.fcards > li .ft b{display:block!important;
  font:600 16px/1.25 var(--tp-serif)!important;color:#141416!important;margin:0 0 6px!important}
 html body .mobx ol.facc.fcards > li .ft i{display:block!important;font-style:normal!important;
  font:400 14px/21px var(--tp-sans)!important;color:#4a4a52!important;max-height:none!important;opacity:1!important}
 html body .mobx section.fsec-a .fmini{margin:20px 0 0!important}
 html body .mobx section.fsec-b .fbox .lbl2{display:none!important}
 html body .mobx section.fsec-b .fnote{text-align:center!important;margin:15px 0 0!important}
}

/* The accordion's "+" toggle belongs to the old two-column list. As cards the
   four formats are open already, so there is nothing to expand. */
html body .mobx ol.facc.fcards > li .ft::after,
html body .mobx ol.facc.fcards > li .ft::before{content:none!important;display:none!important}
/* Every .pbody carried min-height:var(--band) = 524. Variety's onboard bands are
   363 and 516 - they size to their content and the frame solver sets the air.
   These two do the same, or band one sits with 150px of dead space under it. */
html body .mobx section.fsec-a.fsec-a, html body .mobx section.fsec-b.fsec-b{
 min-height:0!important;height:auto!important;max-height:none!important}

/* The puzzles head is BOTH .tpg-hd and .arc-hd. `.mobx.mobx .tpg-hd.tpg-hd.tpg-hd`
   (0,5,0) carries display:block!important and outranked the shared component's
   `html body .mobx .arc-hd.arc-hd` (0,4,2), so the band kept the old flex/block
   head. These repeat the component at a weight that wins. Nothing new is set. */
@media(min-width:761px){
 html body .mobx.mobx section.tpgames div.tpg-hd.arc-hd.arc-hd.arc-hd{
  display:grid!important;grid-template-columns:1fr auto!important;gap:0 22px!important;
  align-items:start!important;position:relative!important;width:100%!important;
  padding:0 0 24px!important;margin:0 0 26px!important;border:0!important}
 html body .mobx.mobx section.tpgames div.tpg-hd.arc-hd.arc-hd.arc-hd::after{
  content:""!important;display:block!important;position:absolute!important;
  left:0!important;right:0!important;bottom:0!important;top:auto!important;
  height:1px!important;width:auto!important;flex:none!important;background:#d8d2c6!important}
 html body .mobx.mobx section.tpgames div.tpg-hd.arc-hd.arc-hd.arc-hd > .arc-eyebrow{
  grid-column:1!important;grid-row:1!important;order:0!important;
  font:700 12px/19.8px var(--tp-sans)!important;letter-spacing:2.5px!important;
  text-transform:uppercase!important;color:#876c22!important;margin:0 0 0 -0.5px!important}
 html body .mobx.mobx section.tpgames div.tpg-hd.arc-hd.arc-hd.arc-hd > h2{
  grid-column:1!important;grid-row:2!important;order:1!important;
  margin:6.05px 0 0 -0.5px!important;padding:0!important;
  font:600 23px/25.76px var(--tp-serif)!important;letter-spacing:-.3px!important;color:#141416!important}
 html body .mobx.mobx section.tpgames div.tpg-hd.arc-hd.arc-hd.arc-hd > h2::before,
 html body .mobx.mobx section.tpgames div.tpg-hd.arc-hd.arc-hd.arc-hd > h2::after{
  content:none!important;display:none!important}
 html body .mobx.mobx section.tpgames div.tpg-hd.arc-hd.arc-hd.arc-hd > .acount{
  grid-column:2!important;grid-row:1!important;order:2!important;position:static!important;
  top:auto!important;right:auto!important;
  font:400 12px/19.8px var(--tp-sans)!important;letter-spacing:1.6px!important;white-space:nowrap!important;
  text-transform:uppercase!important;color:#9a9488!important;margin:0 -2px 0 0!important}
 /* the old head painted its own rule as a child div; the component's ::after is the rule now */
 html body .mobx.mobx section.tpgames div.tpg-hd.arc-hd.arc-hd.arc-hd > .tprule{display:none!important}
 html body .mobx.mobx section.tpgames div.tpg-hd.arc-hd.arc-hd.arc-hd > .tpg-nav{
  grid-column:2!important;grid-row:2!important;align-self:center!important;justify-self:end!important}
}

/* The puzzles band centres its content (justify-content:center with .tpg-in on
   flex:1), so tp-secfit's padding-top was being absorbed and the head sat 17
   below the band's top edge instead of on the line every other head sits on.
   Packed to the start, the same way index.html packs its own bands. */
@media(min-width:761px){
 html body .mobx.mobx section.tpgames.tpgames.tpgames{justify-content:flex-start!important}
 html body .mobx.mobx section.tpgames.tpgames.tpgames > .tpg-in{flex:0 0 auto!important}
}

/* Variety hangs the count 2px past the column. Below 901 the sections run edge
   to edge, so that -2 puts it 2px off the right of the screen. Zeroed there. */
@media(min-width:761px) and (max-width:760px){
 html body .mobx .arc-hd.arc-hd .acount,
 html body .mobx .arc-hd.arc-hd .tplab,
 html body .mobx.mobx section.tpgames div.tpg-hd.arc-hd.arc-hd.arc-hd > .acount{margin-right:0!important}
}


/* ============================================================================
   THE FOOTER MARK, MIRRORED ON VARIETY. Measured live on varietypartners.com
   at 1512/dpr2: `a.tpf-mark` is display:flex, align-items:center, GAP 8, and
   holds a 33 x 33 `span.vpf-ic` carrying the mark as a background-image with
   border-radius 8, then the wordmark at 17/17 Iowan. Ours is the same, with
   the tile inlined as base64 - a url("tp_favicon.png") resolves against the
   clickable's blob origin and vanishes there.
   ========================================================================== */
footer.tpfoot a.tpf-mark.tpf-mark{display:inline-flex!important;align-items:center!important;
 gap:8px!important;vertical-align:baseline!important;text-decoration:none!important}
footer.tpfoot a.tpf-mark.tpf-mark .tpf-ic{display:inline-block!important;
 width:33px!important;height:33px!important;min-width:33px!important;flex:0 0 33px!important;
 border-radius:8px!important;margin:0!important;padding:0!important;
 font-size:0!important;line-height:0!important;color:transparent!important;
 text-indent:-9999px!important;overflow:hidden!important;
 background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAACECAYAAABRRIOnAAABdmlDQ1BJQ0MgUHJvZmlsZQAAeJx1kb1LQmEUhx+1KMxwqCHCwcCiQSEKorFscJEQM8hquV6/Aj8u9yohrUFLg9AQtfQ19B/UGrQWBEERRDQ39rWE3M5VQQk9l/eeh997fodzzwV7OKfmjZ55yBdKejQU9K7G17x97zix4cLDmKIa2kIkEqZr/DxKrcRDwOrVva5jDCRThgq2fuFZVdNLwjIN4a2SZvGe8LCaVZLCJ8J+XQYUvrX0RIPfLM40+MtiPRZdBLvV05tp40Qbq1k9Lzwp7MvnympzHutLXKnCyrLkUTkeDKKECOIlQZlNcpQISC7Izjr7puq+JYriUeWtUUEXR4aseP2ilqVrSnJa9JQ8OSrW3v/v00jPTDe6u4LQ+2qan+PQtw+1qmn+nppm7QwcL3BdaPmLsqe5b9GrLc13DO4duLxpaYkDuNqFkWdN0ZW65JBjT6fh4wIG4zB0D871xq6a95w/QWxbftEdHB7BhNS7N/4A7/1oAsTOTugAABpjSURBVHic7X17lFTVme/v2/ucU49+NzTNQ1BARUSDgEPwwdAg4E3MqGPojo81NzEKcWJmRpyslUwma4rKzL1rZd3cYSaznKsoUe+6Uac7qDG5Gh8JjaIg4hAxiiERowF5Nt1V1V2vc/b+5o9zTtGNCA3U6erqrt9a1Y/q02efU9/vfPt77k0oEpiZOjvXyJaWuCIC+++/+fOvn6u0WACt5yjGHEOIBsfRFxBRPYMVwFSsaxgZICaQZOYewxC/c7TuloQdEGKHFHrrvC/8+4f+kcygzs6YbGlZo4iIT3bWQY9+tidgBqGjVVBbh/Lfe/3Ju68ggRuJaKGj9ayQadQahoBSGsyA7ShoXZTrH7EQgmAaEkSAlAKOo5GznaQhxDvM/AprPP3Zm+7b4h/P7a0SrR26/8N4JjgrQrS3t8o2jwhbfnpHc9iovt5x1O1C0BWRsIm8rZDPO3C01gAxmIkIAIjOduxRAAaYmQEQMcBkCCEsy4BlSmSyNrTmLYYhH846vc9cccP6g8BAmZwJzkgozEzAGiKK6xfbV9U1RkKrmfmuSNhsth2NdCbPBCgGBEBEVBF+McDskoQAzYCMRiwyDYFM1j5IRPcfzeTWLmtbl2COCWANn8k0Ik73H9rbWyURMVFcb3v67psbI6Ft0YgZ04zmRCqr0pm8dilABhGJChmKByIQEQnvs6V0Jq8TqazSjOZoxIw1RkLbtj19981EcU1E3N7eKk97jNM5eOPGRcbixZucFx776sSGqshDIcv8nKM0sjnbAUhWhF8aeJpDhUOmYUiBXN5+rrsvc+fyW3/0sS+zwZ5rsAIk5hgRxfWrP7nr2pBlPBwKmRNSfTnl2gV02pqmguKDmTWIuKYqJHM5e38u79x+1Yr7n2eOCaI4A6c2OE9JCGYQ4JJh20/vvsc0jLVKaeRtRxHRaaukCoIHMyvLNKSUArbjrJ5/w33/4toVcT6VF3LSJ5sZ1NHRKojieutTd6+rrQ6vzeZslbcdXSHD8AURybzt6GzOVrXV4bVbn7p7HVFcd3S0CvcBP8n/ftof+muGrU/dva6uJryyO5mxARhUcRnLAuxOEU5DbcRMpLIPLvjz+1adSlOchBCtkqhDbd3wl+vq6qIrexJpB0RGYFdfQXBgdurrokYikX5wwRf/zypftic69IRTxsaNMYOoQ7224a57GhqqVnYnMnaFDGUMIqM7kbEbGqpWvrbhrnuIOtTGjbETyvMTGsKPdL3S/rVlNdXhF7JZ22FAnujYCsoKTIAKh00j1ZtdvrDtgRdPFNUcIORYDAKI4fOzDo8ji34thBiXtx2uuJUjA8ysLdMgrfUhzvNlz77TdAiIIx6H9o8ZIOhZs1opHo9rR+hHoxGr2fMmKmQYISAikbcdHY1YzY7Qj8bjcT1rVusApVAQtq8+Xt3w9RW11eHlqb6cU3EtRx6ISKb6ck5tdXj5qxu+vqKtrUP1D3ETcMzFfPOl/TWqz/xPQ8qpubxdmSpGKJhZhyyTHKU+kFX23HlLJ6R8V9QTeLsgims7KVfXVoen5XK2qpBh5IKIRM4NWk2zk3I1UVwD7QIAyI9cdT62akw0au4Sghpd06HiVYxkMINNQ7DWfDSdtme23LquCwAEOmOSCGyF5E3VVaGxtqO4QoaRDyKQ7SiurgqNtULyJiIwOmNSoAU6FosJAt1p28ovaapgFICIYNuKCXRnLBYTaIEmAHjtya/ND1vmlmzOAVCxHUYXWIdDBrJ5+4orb3pgmwAAZvnFsGUK8LEARQWjBAwdtkzBLL8IAKK9vVUSeFHeVq4OqWB0gYjytgKBF7W3t0oxRdZNAGFm1nbAfPo1lhWUN5ghsrYDEGZOkXUThNLWwpBl1CqldcW7GH0gAimldcgyapW2Fgomnm1IAaA4nT8VlCOIDSnAxLOFIJqjlAZVWupGLQhMSmkIojkCwBjmQZTjVjBiwQDYJcAYAfB021Hw2usqGJUgcjnA0wUR6rVmVApnRy8IIK0ZRKg3ACi4JXJFAzP7Kmh0ggBRngpXGW7jbvEunhmwTAnTlKPTMCFAaUYuN+juuWEDZi5uJTUzYBgC+w4mse9AElKKUaUpiACtGdVRCxdMHQsuw5svKiG01qiKhPFc52488NjrxTx1WeGi6U34f2u/hFzeKbtsQCC9FlISiAhSuqvGBAXyvgg6Nusxo+ir0xC5aZ7+slXqk2MIQdCaYZnlW4pqFFOtucaka1Ae+7n4alMIl3BKaYABHYCxQkQQgsCaPYKdeozj77v8pgwORkMEBSGonwZwP+yJzbWYMrEOE8fVormpBnv3J/CzX+4CEZ2RQIgIwjMMfS3QUBvBlEn1mDyhDk2NVRBS4MdP70A254AII8pOKgtC+AWe/lQwY9pYXHPl+Zh/2WScd04DaqtDEESoqw3jFy//1iPE6QmKvKlHaYZiYNyYaiz67FQsnH8eZkxrQmN9BKYhEbIMHO1JY8Nzv0G2DD2JU2HYE0IKV0gMYP7sybjtxsswf/Y5qI5ayNsKubxCXzoPpTSU1ujty5/2GP7cr5gxZWI9br1hNpZdfQHGjamCozRyeYVczkE648CQefQkM2U4HQwOw5oQwiPD5Al1+KsvX4lrrpoOIQTSmTy6ExlXcwh3rgcEpBTez4OHFAJKa4QsA7e3zsMt189GQ10Efel+Y3gvKdwlAqUcuWUjw5IQ3tKF0Jpx3ZKL8Ld3Xo0xDVVIprJguFqjGEKR0jVMZ0xvwj/81RLMnjkByd4sehIZCDGyBf9pGHaE8P12ZsbqO67G7SvmIZ3JI5HMFFVAUrgu8bKrz8eae5YiEjbR1Z0e8RrgVBhWhHC5wBBC4B/vXY4bls1EV08agoqjEXz48ZG26z6Dv/v6ImSzDnr78jCM0UsEH8PqE/C1wz/euwzXL5uJI0fTkEIUNdrnk2HF5y7Bd7+xGH3pPBytIWV5RRSDwrAhhJQCWjP+duVCVzMcTRf9iZXCtRlaFkzD39+9GMneLICyzUwGgmFBCF9Qf778Ynz5prno6j4LMnyKN+h7LFPPacD3Vi9DNu+AudJ5cDxKTghfUNOnNOKbq/4Uqb4chCjuZfkyt0yJNfcsRXWVBdtWp+2ijgaUlBC+OKQU+PZftiAaMeEoXfRiPkGuC/vfb5qLeZdOQqo3N6o9iZOhpJ+KHyG8fulMLJg7BcneHGSRtYNPhnMn1eMrK+YimcpWvImToGSfDHlr/NdUh3Dnly5HOp2HDEKFk2tWfO2W+aitDsMJMB0/EhBA+lsPKqskvMDQjcsvxuSJdejuyXgVVmd2PYWU84AxXO1w0fQmXHPVdCRSWS9jeqZjYFBpbcbgjht+KFH6mwAopRENm/jitbOQydhFNyT740tf+AzCIRPZXHGjnYMBM+P4eh1fD7J7wAn/71gOJcir+yRKQgjhBYcWzp+K8yY3Fj0sDaBQQOOnsfsy+RKQAYiETZimKLjDXPhyrBLLL/jxj1CaoRztblFlq0L+ZihQEkKw98j8t0UXuj8H8BgIIigAi6+YirENUXQnhlY7MAOmIfDbPYfx0cc9MLyxhRAwpFvok7MdpDM2DhzuRXciDSJCTVUI45tqMGVSPaZMrMe4MVUQgtCXzkNrDtxVHnJCEBE0M8aPq8FlF09AOmsHwn6tXeNx8YJpsB095AEozQzLMvDqmx9i3WNvQOlPN2aroxYmNtcCAFK9Oew/nALgapf5syfj2j+9AC0LpiISMtCbtgMNsw85IYQgKMX4k0snobEugp4ApgvALYGb2FyLi84fh2zOHvIglBSEvkweX1kxD9cvnYnf7jmCdY9vw7u/OwQphVsBxowv3zQXd932WZimBAHI2wpHuvuwdcdHeHTDDmx6fQ82vb4Hl1zYjHvvvBpzZk303PNg7mfo3U7PiJp36TkIopOn/8c0e+YE1NdG4DilcTUJQD7voL4mjKVXnY8ffOdzqK8NQ2uG43Zb44blF8OQAqneLFLpHGxHYUxDFK2fvxRP/PBm/Nk1FwEAfrP7IL72nafx0ubfo7YqBBXQvqdDTgilGYYhMHN6E3K2AgX45H5mRnPJG1aJCI5iHO7qxcTmWsydNQnMXPAi8nnHJYegQpLNthWOJjIAAd9bvRQL5kzxNKvGd3/wAna9fwjRsAkdREV70c94ssG8G57QVIPx42rcfEJAczsRcMF5Y71QeGlpQYSCwCeOrym8537/pGtJRDCkgG0raGbcdet8AO45crbCusffcKOtASiJodUQ3o1PGl+H6qgVmNoD4FrrzS7phk9CkxC2zEEfLaVAOuNgxrSxmDa5sUDuN976I/YeSMCyZNFbAIaUEP6Tes74WhiGKLifQYzR1FiFuprwsNAQZwPNjEjYxLQpjQBcLdGXsbF3fxKmIYseDS1JLqNpTFVgc7sv+/raCMIhI5B5dkjBDBKEmuoQgGPTbiaTD2S6HfrQHYAx9VF4m5wHNlRDfcQNBpU5H0AAGIUeWT9bEw4bwbRJFv2MJ4F/+ZGwGXjipypiQZxq19KygBvI6027DUhKMQwpMKa+Co7WRV/3pyRThiFFYILyPx/LFN7TVd6UEOS6oYe7+gC4ybLx42owISAvLZju70Ech36d4sUdm73fi9+Bfuycg7+egb9rDMxynfwamQFDEroTGXz0cU/h/T/5zCTU1YQCyM+UaCljO8AiFf9jzdvK/aWsPQyNcMjAb3YfLAifiPBnS2Yib6tAvKehdTu97+lMPjhX0GNEbzoPzbrkkcrTQX8doT1NJAThJ8++XYhUfn7xhZgzawL6MsHkZ4Y4MOXeQFd32v0xwPm9O5GB4xS/YDdI9LcHLENifFMN2p/9Dbb+em+h8uubKxcinbUDi/CWpB7iUFdfYFzwT9udyCCTdc6qLG8o4Zf2maaE1oyjiQwe+o/tWN++HQBw5bwpWPM31yASMpHLO4Flb4eUEL5g9h1IwnaCmQP9MQ4f7UNPMoNxY6th28M3Wqk1Ixox8b0fbsYvXt6NmioLjqNxyPMqLpw6Fis+dwluWDYTWnOgZACGnBDu9737E0j15WGZxQ+9+iqiL53HvoMpTBpfh3x+OOUzBsLNeCpct3gGohETyVQWVVELUybW46LzmzB9ciOiUQup3hzcRugRVDHlC/9gVy/2HUhixrSxyOSCmw9/98ERXDlvijfu8GQEEWA7GjPPb8LcSyYW3lOaYdsK2ZyDRCrj9asEfw9DbkP4SwS9+/uDuPSiZqQzeSCgkrCd7x2Au4bz8CSDDyIgm7ORydoD3iS4tkWxm5dOhqGPQ3jC2b5zn1dgG9xQO987gKNe4/BwNyv9dT0Lr8JSSUOLISeEX/z6n+98jMNH+9wUbgDjSClw+Ggf3t59EOGQGUiqfSRiyAnhB1u6utPY/vY+txQsAGH5dsnGLe9DnkW31mhDSULXviJ8rnN3YPEIza4mennbh9h/OAXLMso9zzUkKAkhlLtZB7b++o94b89hRMJG0bUEs2vA9iQzeGnz7xGNmIXpqlQYkPjzVs4/Wb9GKVCy7m/h7juN9v//NsJWMJVN/hk7nn27ZGtC+EsxK8UwDImu7jQAb60rrbH3QBKWJWE7elhMa+L4xbqL8RqMbtZeKfovNu3Ge++7WkJpXZzx/TG81rePPk7gZ798z4sCqqKOcUL0S71LSYhGTDQ3VeOd3Qfxyht/cJtsPFuq/ec7YdsKjXURmF6grpSvkmkIZrf4I5tz8MDj29yoZQDGJXutow//5E0c6uorfOhBwzeek6kstu/ci39evxl3fvspdHWn3aCTo6A1442d+7Dy757Cc5t2Y+/+RODXdSqUdJ1K5T3Bv3ptD17a/D6WXj0diWS2qKqd2R3jcFcfHnhsG/7hr5egqycNI8D+SGZ3z4y9+xNY/U/PYu8BV9CRsIlJ42sRCZlubIQZvX15vLXrAN7adQCRsIl777gKN107C8m+7JAGpHyUfuFS7wn+3w9txuyZ41FTFSp64sufOp58/h1cffm5WPTZqehJZQsd2cWG262l0NgQwfe/fS2YgXDIQDhkIBo2YZrSdYXhashUbw6ZnA3H0RjbEEU6Z0NSaZR3yQmhvSf44JFe/I/7OrH2u9e51U4obrGTP0v8z3/fhAvOG4uxjVFkc8FlDtlbDuD8cxsBuHEQ16tw52rbcT0ty5RoHlvlXQfBcZTbwFSiaPuwWH1La4YUhJe3/QE/fPQ1NNRFiu4i+v2Uh4/24Ts/eAGO0jAMEUhQ7NiYrgbI5Gzk8g5sRxe8KZ/smhl5WyHjHRdkN9tgMCwIAbj2hJQCj27YgfXtb2JMQxRK6aIGk7R2rf6d7x3Ad/7XCzCkDJwU7g49x5YHOv7Bp37HDIcVdYcNIQA3zyEE4YePvIYHn9iOhvpIYevDYkEpl3gvb/sDvvX9X4Dgzu+V1elcDCtCMLvLDQlB+LdHt+D7978My5QIh4srMKXcxc43vf4BvhH7OY4cTaO+JuxppNIHh0qJYUUIwI0u+l7B48/sxDdiP8Pe/Qk01kcBoGjTiFIMKQR2vPsxvvqtJ9H5+geor43ANI1RTYxhRwgfvqG5/e19+Mo3N+DhjjfBzKivixR2wvEt9jOF8qaoQ129uPefnsWaf/0lDnX1oqEugpBleCFnPTAHMcJRcrfzZPADV73pPP714dfwzEu70HbdpViyYBrGja12LXTfeveEd7r2Rv+Kqp++uAsbt+zBjcsvxheWzMC0yY2QUiBnO7BtDUe7JCy1JxAkhjUhAF9gbjLsgz924/v3v4z1/7EdV847F1fMnYwZ05rQ1BBFVdREfW0EVVHrtMfwtYwUhGRvDv/3yR144uc7MX/2OVh4+Xm4ZEYzJoyrQVXEQjhkFFzYkYhhTwjANTYVc2FL5yPdaTzz0i4889IuhEMGJjbXYtyYKowfW43DR9OF/zldqH7ky+cVNr/xITa/8SGkIIxvqkFzUzXGjamGlOTWggLlv9zAcQiMENTvVSww2M0SetszghnZnIM9Hx3Fno+ODhibmc94bD8T60cxldLYdzCJfQeTA47zlm4ojFPs+y0FAur+do0wXWxjrNA4zcBxm7G7yoPcsQc2WJ/RGAB/YsN3f/tIYGCxi//dv99id50PHQJY/Jzhpn0NKWAYsrDyyZDAf2SDHgMnHsfdHUjDNGXAFxEcaNMTdyigeKk14Rlmyd6ct4JLuT0lZw6/f9myJMY2RIsadh8asC66htCaUVcdQmNdpNinLhto5pKtnnu2MAhUdCI7iuEop8hnLS+Uo1tKIDZAKHqnTH/jq4IyAkEKMHo896rsZrwKigYWbuFvj2DQ+6YhUfbLtVVwFmB2WyrpfUHEXWU43VVQZLjbPXGXUIp3SCkApoqGGK1gYikFlOIdApLechwNEFf0xGgFMTmOBiS9JWDglVzeSQopxChK+1fggRkspBC5vJOEgVfEYZXYD2BXyDRAQHlGUyo4YxCgQ6YBALsOq8R+0dbWoUDYZJkVT2N0gtkyJUDY1NbWodwchsMbcjlbg4ZvSV0FAYEgcjlbw+ENAGAwx8SaNdjectHeN6Nh8/JMxlYglG+6roLBg6EiEVOks/b2zt3nbGeOCdHZCRGPxzVDP2QYROWXw6/gTMHMMAwihn4oHo/rzk4I8guLOh+7ZYxhVO0iQY22rclbFa+CEQpmsGkKZs1HHadvZsutj3cB8DedaReLb3v8iKP5vuqoJZhZlfqCKwgWzKyqo5ZwNN+3+LbHjwDtggjsGZFtmjkmHCnXpnpze8IhQzJzxQUdoWBmHQ4ZMtWb2+NIuZY5JoA2DXiNOkTgjo53aVnbuoSj8C3TlEREFUKMUBCRNk1JjsK3lrWtS3R0vEv+9mQD7IT29lbZ1tahfvXjO56vrbGWp1I5RYIqHscIAmtWNTUhmUzlX1hy2/prfZn7fx9AiFgMAoihZdYfxhmwfk2EcbatmKhEy5lUUFQwszZNScw45CB/Wec75x0C4ojHj0WoBwg6HoeeNetdWtz26IGcY/+FaQgS7tRR8UXLHyyItGkIyjn2Xyxue/TArFnvUn8yACdo9m1r61AbN8aMpbc+8mI6k19dXxcxGDy6CyRHABjs1NdFjHQmv3rprY+8uHFjzOg/Vfj41FgDc6sk6lCdj9+xrr42vLInkXFAVBatfxUcB3bJ0JPMPthyy/pVvmxPdOhJbIMOzRwTLbesX5VIZR+sczWFzZXpo2zg7Y5q19VFjETKJ0NMAB2f6kF+KiFcNyTO7e2tctHN61clU9kHG+siJjF0JUYx/MHMmhi6sS5iJlPZBxfdvH5Ve3urBOJ8sh2wTxmedkPbMSKK61fa77zHNORaR2nYeVVxSYcpWLMyLSkNKWA7avXCtof+xdUMJycDMPjmCWJ2SfGrH3/lWss0Hg6HzAm9fXnFYKq4pcMDzKwJxNVVlszm7P1527l9yW2PPM8cE0RxxiCm+8EKkonieuPGRcaS2x55Pp3Ul2dz9nPRqClDliE0s1MpvysdmMGa2QlZhohGTZnN2c+lk/ryJbc98vzGjYsMovigQwenndHsH9l6tX3lzSQoHgmbF/b25eE4SoFQ0RhDBGbWYLBhSFldZSGTtXez5thVbQ8+AQyU1WBxRinu/nbFi+2r6qolr1Yad0VCZrPjKKSzNpO7goMAqJJKLxJcLcxMgGZARsMmGYZEJmcflAL39ypau6xtXWKw9sKJcFaC6s/Alx67o7kqbFyvlb6diK4Ih0zYjkI+70BprcHETOz1BNFIWGwlaLC/+hUxMYhJCiEsy4BpSGRzNph5i5Di4b6s88zSW9cfBM5MK/THWQuFGYSOVkH9LmJz+1evYBY3QmChVjzLMo1awxCFJf78VeMq+HQIQTANUdi+0XE08raTFJLegcYrRPrpq9t+tMU/nttbJVo79Jlohf4o2lPKzNTZuUa2tMRV/4t69SdfPZe1sYA1z1HQcwxBDY7iC4hQzxqq0iB0HJiYBCQzegxJv3M0d0uIHSRoBwln61UrfvRh4VAGdXbGZEvLGkVUnM67/wLR9uhi3T84OgAAAABJRU5ErkJggg==")!important;background-size:contain!important;
 background-repeat:no-repeat!important;background-position:center!important}
@media(max-width:760px){
 footer.tpfoot a.tpf-mark.tpf-mark{gap:8px!important}
 footer.tpfoot a.tpf-mark.tpf-mark .tpf-ic{width:28px!important;height:28px!important;
  min-width:28px!important;flex:0 0 28px!important;border-radius:7px!important}
}

/* The stat rail is solved by bisection and lands its figures a beat after the
   page is up - that re-lay was the flicker down the right side of the banners.
   It paints at 0 and site.js adds .tp-rail-set the moment the solver has run,
   with a 1.5s failsafe in the script so it can never stay hidden. */
@media(min-width:761px){
 html body .mobx aside.tp-rail{opacity:0!important}
 html body .mobx aside.tp-rail.tp-rail-set{opacity:1!important;transition:opacity .18s linear!important}
}

/* the header band is white, the page stays on paper #f4f3f1 */
html body .mobx header.header, html body .mobx > header{background:#ffffff!important}
html body .mobx > header .nav{background:#ffffff!important}



/* ============================================================
   tp-game-size — 2026-09-17. SCOPED TO SUDOKU (.tps-card) FOR APPROVAL.
   To apply to all eight, change every `.tps-card` below to `.tpg-card`.

   1. THE EMPTY ROOM. `.tpg-card` is a FIXED 800px flex column and
      `.tpg-card > .tpg-msg` / `> .tpg-float` both carry `margin-top:auto`.
      That pair centres the board between header and floor - right when the
      board fills the card, a 230px hole when it does not. Sizing the card to
      its content leaves no slack, so the auto margins have nothing to spread.
   2. NO SCROLLING. The card is never taller than the window: the zoom is
      solved against the viewport, so it shrinks to fit rather than clipping.
      `overflow` stays visible - a scrollbar inside a puzzle is the bug.
   3. 15% smaller by default, via `zoom` not `transform:scale()` - scale would
      blur the type AND make the card a containing block, the trap that threw
      the subscribe modal off centre earlier today.
   ============================================================ */
.tpg-shell .tpg-card.tpg-framed,#tpgwrap .tpg-card.tpg-framed{
 zoom:var(--tpz,.85)!important;
 height:auto!important;min-height:0!important;max-height:none!important;
 overflow:visible!important;
 margin:auto!important}

/* FULL SCREEN = the whole window. Not a bigger card - the window. */
.tpg-shell .tpg-card.tpg-framed.tpg-fs,#tpgwrap .tpg-card.tpg-framed.tpg-fs{
 position:fixed!important;inset:0!important;
 /* zoom multiplies the box too, so calc(100 * var(--vw, 1vw))/calc(100 * var(--vh, 1vh)) would overflow by the zoom
    factor. Divide by it and the painted result is exactly the window. */
 width:calc(calc(100 * var(--vw, 1vw)) / var(--tpz,1))!important;max-width:none!important;
 height:calc(calc(100 * var(--vh, 1vh)) / var(--tpz,1))!important;
 border-radius:0!important;margin:0!important;
 display:flex!important;flex-direction:column!important;
 align-items:center!important;justify-content:center!important;
 padding:72px 32px 48px!important;overflow:visible!important}
/* the pair of auto margins exists to centre the board inside a FIXED card.
   Full screen centres with justify-content instead, so they have to go or the
   board is pinned to the top and the message to the floor. */
.tpg-card.tpg-fs > .tpg-msg,.tpg-card.tpg-fs > .tpg-float{margin-top:0!important}

/* the two chips, top right, clearly apart and readable */
.tpg-card > .tpg-full,.tpg-card > .tpg-help{
 top:24px!important;padding:7px 14px!important;border-radius:99px!important;cursor:pointer!important;
 background:#fff!important;border:1px solid rgba(20,20,22,.34)!important;
 font:700 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
 letter-spacing:1.4px!important;text-transform:uppercase!important;color:#141416!important;
 transition:background .15s ease,color .15s ease,border-color .15s ease!important}
.tpg-card > .tpg-help{right:64px!important}
.tpg-card > .tpg-full{position:absolute!important;z-index:3!important;right:197px!important}
.tpg-card > .tpg-full:hover,.tpg-card > .tpg-help:hover{background:#141416!important;color:#fff!important;border-color:#141416!important}
.tpg-card.tpg-fs > .tpg-full{right:auto!important;left:auto!important}
.tpg-card.tpg-fs > .tpg-full,.tpg-card.tpg-fs > .tpg-help{top:24px!important}
.tpg-card.tpg-fs > .tpg-full{right:197px!important}
.tpg-card.tpg-fs > .tpg-help{right:64px!important}
.tpg-card.tpg-fs > .tpg-x{right:22px!important}

/* 1 · HOW TO PLAY OPENED BEHIND THE GAME. The splash is z-index 9999 and the
      game shell is 10000, so pressing the chip did open it - underneath. */
.tpsh{z-index:10001!important}

/* 2 · ONE LINE FOR ALL THREE. The chips sit at top 24 and stand 22.4 tall, so
      their centre is 35.2. The X is 28.9 tall, so it starts at 20.75 to put
      its centre on the same line. */
.tpg-card > .tpg-x{top:20.2px!important;right:20px!important}
.tpg-card.tpg-fs > .tpg-x{top:20.2px!important}

/* 3 · THE BOTTOM, EVENED OUT - inside the box it already has, nothing grows.
      Measured before: board->tools 5.1, tools->pad 6.8, pad->message 0, and
      the ERASE key 25.5 tall against 34 for the numbers. */
.tpg-card.tps-card .tps-tools{margin-top:24px!important;margin-bottom:0!important;gap:8px!important}
.tpg-card.tps-card .tpl-pad{margin-top:14px!important;gap:8px!important}
.tpg-card.tps-card .tpl-pad .tpl-k{height:36px!important;min-height:36px!important}

/* ============================================================
   tp-game-card - 2026-09-17. THE FRAME. APPLIED PER GAME.
   A card gets .tpg-framed from tp-game-head only when its game is listed in
   that module's CONF - so turning a game on is one line there, not here.

   The frame ports; what sits in the two lines does not - see the note at the
   foot of this block.

   MEASURED ON PAINTED INK, NOT ON BOXES. The boxes said 51/51 top and bottom
   and it still read wrong: a 26px serif line box carries leading a 10px cap
   line does not. On the ink it was 49.8 above the title against 51.6 below.

     card top    -> title ink     36.0
     title ink   -> the rule      20.0
     the rule    -> the top line  20.0
     the top line-> the body      38.0
     inside the body              38.0
     the body    -> the foot line 20.0
     foot ink    -> card bottom   36.0

   The CSS numbers are NOT those numbers - they are what solving against the
   ink produced. Do not "tidy" them.

   THE RULES ARE ONE LENGTH. They were drawn at each game's own board width,
   so they ran 300 on Spelling Bee and 588 on Mini - eight different cards.
   They are 480 on every game now, which is Word Groups' measure. --tpw is
   still written by tp-game-head, but only the boards use it.
   ============================================================ */

.tpg-shell .tpg-card.tpg-framed > .tpg-btns:empty,#tpgwrap .tpg-card.tpg-framed > .tpg-btns:empty{margin:0!important}
.tpg-shell .tpg-card.tpg-framed,#tpgwrap .tpg-card.tpg-framed{padding:39.2px 30px 37.4px!important}

/* what the head no longer needs */
.tpg-card.tpg-framed > .tpg-eyebrow,
.tpg-card.tpg-framed > .tpg-sub,
.tpg-card.tpg-framed > .tps-hud,
.tpg-card.tpg-framed > .tps-notes,
.tpg-card.tpg-framed > .tps-hint,
.tpg-card.tpg-framed > .tps-miss,
.tpg-card.tpg-framed > .tpg-x,
.tpg-card.tpg-framed > .tpg-full,
.tpg-card.tpg-framed > .tpg-help{display:none!important}

.tpg-card.tpg-framed > h3{order:1!important;width:500px!important;text-align:center!important;
 margin:0 auto 20.3px!important;padding:0!important;border:0!important}
.tpg-card.tpg-framed > .tpg-ctrl{order:2!important;width:500px!important;margin:0 auto!important;
 border-top:1px solid rgba(20,20,22,.26)!important;border-bottom:1px solid rgba(20,20,22,.26)!important;
 padding:20px 0 19.4px!important;
 /* three items, measured: left on the left rule, right on the right rule,
    and the count DEAD CENTRE of the rule - space-between put it wherever
    the two outer words happened to leave it. */
 display:grid!important;grid-template-columns:1fr auto 1fr!important;align-items:center!important}
.tpg-card.tpg-framed > .tpg-ctrl > *:first-child{justify-self:start!important}
.tpg-card.tpg-framed > .tpg-ctrl > .tpg-count{justify-self:center!important}
.tpg-card.tpg-framed > .tpg-ctrl > *:last-child{justify-self:end!important}
/* the body keeps whatever order the game gave it */
.tpg-card.tpg-framed > *{order:3!important;margin-top:0!important;margin-bottom:0!important}
.tpg-card.tpg-framed > .tpg-foot{order:4!important;margin:38px auto 0!important;
 border-top:1px solid rgba(20,20,22,.26)!important;padding:20px 0 0!important;
 width:500px!important;gap:0!important;
 display:flex!important;justify-content:center!important;align-items:center!important}
.tpg-card.tpg-framed > .tpg-msg{order:5!important;min-height:18px!important;width:500px!important;
 border-top:1px solid rgba(20,20,22,.26)!important;padding-top:20px!important;
 /* the line is always held, so a card never changes height when a game speaks */
 margin-top:38px!important}
.tpg-card.tpg-framed > .tpg-btns:not(.tpg-foot){order:6!important}
.tpg-card.tpg-framed > h3,.tpg-card.tpg-framed > .tpg-ctrl{margin-top:0!important}
/* zero-height rows must not spend a step */
.tpg-card.tpg-framed > *{margin-left:auto!important;margin-right:auto!important}
.tpg-card.tpg-framed > .tpg-float:empty,.tpg-card.tpg-framed > .tpg-btns:empty{margin-top:0!important}

/* both lines of type are the same: 10px caps, black */
.tpg-card.tpg-framed .tpg-ctrl > *,
.tpg-card.tpg-framed .tpg-foot > *{position:static!important;font-size:10px!important;letter-spacing:1.6px!important;text-transform:uppercase!important;font-weight:700!important;color:#141416!important;line-height:1!important;
 background:transparent!important;border:0!important;margin:0!important;
 height:auto!important;min-height:0!important;white-space:nowrap!important;cursor:pointer!important;
 border-radius:0!important;box-shadow:none!important}
/* the top line is two words held apart on the two rules, so it takes no
   dividers; the foot line sits together, so it does */
.tpg-card.tpg-framed .tpg-ctrl > *{padding:0!important}
.tpg-card.tpg-framed .tpg-foot{justify-content:space-between!important;flex-wrap:nowrap!important}
/* a foot with nothing in it keeps no rule - an empty line under a hairline
   reads as a mistake */
.tpg-card.tpg-framed > .tpg-foot:empty{border-top:0!important;padding:0!important;margin:0!important;min-height:0!important}
/* a line with one word has nothing to spread against, so it is centred */
.tpg-card.tpg-framed .tpg-foot.tpg-one{justify-content:center!important}
.tpg-card.tpg-framed .tpg-foot > *,
.tpg-card.tpg-framed .tpg-foot > [class$="-hud"] > *,
.tpg-card.tpg-framed .tpg-foot > .tps-list > *{padding:0!important}
/* no dividers on the bottom line - the words carry the row on their own */
.tpg-card.tpg-framed .tpg-sep{display:none!important}
.tpg-card.tpg-framed .tpg-foot > * + *{border-left:1px solid rgba(20,20,22,.26)!important}
.tpg-card.tpg-framed .tpg-foot > *:first-child{padding-left:0!important}
.tpg-card.tpg-framed .tpg-foot > *:last-child{padding-right:0!important}
.tpg-card.tpg-framed .tpg-ctrl > * b,.tpg-card.tpg-framed .tpg-foot > * b{color:#141416!important;font-weight:700!important}

/* Sudoku's nine: ONE outlined strip, hairline cells, echoing the board. The
   outline lives on the keys, so ERASE - now in the foot line - has no box. */
.tpg-card.tps-card .tpl-pad{gap:0!important;background:transparent!important;border:0!important}
.tpg-card.tps-card .tpl-pad .tpl-k{background:#fff!important;box-shadow:none!important;border-radius:0!important;
 border:0!important;border-top:1px solid rgba(20,20,22,.55)!important;
 border-bottom:1px solid rgba(20,20,22,.55)!important;border-left:1px solid rgba(20,20,22,.26)!important;
 display:flex!important;align-items:center!important;justify-content:center!important;
 line-height:1!important;padding:0!important;height:36px!important;min-height:36px!important}
.tpg-card.tps-card .tpl-pad .tpl-k:first-child{border-left:1px solid rgba(20,20,22,.55)!important}
.tpg-card.tps-card .tpl-pad .tpl-k:last-child{border-right:1px solid rgba(20,20,22,.55)!important}

/* the vertical hairs in the foot line were too faint to read at 10px, and
   they only ran the height of the glyph. Darker, and the full line. */
.tpg-card.tpg-framed .tpg-foot > *{padding-top:0!important;padding-bottom:0!important}

/* a hud dropped into the foot line is one child, so its spans never got the
   grey hairs between them. display:contents lets them BE the children. */
.tpg-card.tpg-framed .tpg-foot > .tpm-hud,
.tpg-card.tpg-framed .tpg-foot > .tpc2-hud,
.tpg-card.tpg-framed .tpg-foot > .tpp-hud,
.tpg-card.tpg-framed .tpg-foot > .tps-hud,
.tpg-card.tpg-framed .tpg-foot > .tps-list{display:contents!important}
/* with display:contents the hud's spans ARE the flex items, but in CSS they
   are still grandchildren - the divider rules on > * were landing on the hud
   itself and painting nothing. */
.tpg-card.tpg-framed [class$="-hud"]{display:flex!important;align-items:center!important;justify-content:center!important}
.tpg-card.tpg-framed .tpg-foot > .tps-list > *,
.tpg-card.tpg-framed [class$="-hud"] > *{font-size:10px!important;letter-spacing:1.6px!important;text-transform:uppercase!important;font-weight:700!important;color:#141416!important;line-height:1!important;padding:0!important;
 background:transparent!important;border:0!important;border-radius:0!important;white-space:nowrap!important}
.tpg-card.tpg-framed .tpg-foot > .tps-list > * + *,
.tpg-card.tpg-framed [class$="-hud"] > * + *{border-left:1px solid rgba(20,20,22,.45)!important}
.tpg-card.tpg-framed .tpg-foot > .tps-list > *:first-child,
.tpg-card.tpg-framed [class$="-hud"] > *:first-child{padding-left:0!important}
.tpg-card.tpg-framed .tpg-foot > .tps-list > *:last-child,
.tpg-card.tpg-framed [class$="-hud"] > *:last-child{padding-right:0!important}
.tpg-card.tpg-framed [class$="-hud"] > * b{color:#141416!important;font-weight:700!important}

/* ---- ONE SIZE ------------------------------------------------------------
   Every card is the same object: 660 x 914.4 CSS, always, including the
   moment a game writes a message or a button is pressed. Solving each game's
   board to that height was the wrong tool - the board is not always what
   drives the height, so six numbers gave six different cards. The card sets
   its own height instead, and the slack is shared by two auto margins, one
   above the body and one below it, so the body sits centred between the
   header block and the closing rule. No solver, nothing to re-measure, and
   nothing that can drift after load. */
.tpg-shell .tpg-card.tpg-framed,#tpgwrap .tpg-card.tpg-framed{width:638px!important;height:auto!important}
.tpg-card.tpg-framed > .tpg-body{order:3!important;flex:0 0 auto!important;min-height:0!important;
 width:100%!important;margin:38px 0 0!important;
 display:flex!important;flex-direction:column!important;
 align-items:center!important;justify-content:center!important;gap:38px!important}
.tpg-card.tpg-framed > .tpg-body > *{margin:0!important}
/* a row with nothing in it still claimed a whole gap slot */
.tpg-card.tpg-framed > .tpg-body > *:empty{display:none!important}
/* and the message line under the foot holds no space until it speaks */
.tpg-card.tpg-framed > .tpg-msg:empty{display:none!important}

/* Word Search's grid at 106%, as measured in the tuner. The other games are
   left at 100% - a 480 board at 106% would run wider than the 500 rules. */
/* every grid board is the rules' width, so the line always ends where the
   game ends - no game wider than its own rule, none narrower */
.tpg-card.tpg-framed .tpg-board,
.tpg-card.tpg-framed .tps-grid,
.tpg-card.tpg-framed .tpm-board,
.tpg-card.tpg-framed .tpl-board{width:500px!important}

/* THE THREE SHAPES. A hive, a ring and a 5x5 grid are not grids that can be
   told to be 500 wide - stretched they distort. They were sitting small in
   the middle of a 500 rule with air all round, which read as unfinished
   beside the games that reach their line. They are zoomed instead, so each
   shape lands near 440 and the type inside stays crisp.
     hive 300 -> 1.45   ring 340 -> 1.29   crossword 306 -> 1.44
   The clue columns are NOT zoomed - only the grid - or the clue type would
   grow with it. */
.tpg-card.tpg-framed .tpb-comb{zoom:145%!important;
 /* the hive's own box is 350 tall for 221 of ink - 66 above and 63 below,
    inside the drawing. The rows either side were a correct 38 apart and it
    still read as ~104, which is why it sat low. Pulled back to the paint. */
 margin:-54.1px 0 -53.1px!important}
.tpg-card.tpg-framed .tpb-found{margin-top:-14px!important}
.tpg-card.tpg-framed .tpc2-box{zoom:129%!important;
 /* same again: 373 of box for 267 of ink */
 margin:-50px 0 -46.4px!important}
.tpg-card.tpg-framed .tpm-wrap > .tpm-grid{zoom:144%!important}

/* ...and nothing carries a fill. A disabled Submit still painted the old
   pill background (#cbc5bb) behind the word, which reads as a grey shadow
   on a line of plain type. Every state of every word in these two lines is
   transparent. */
.tpg-card.tpg-framed .tpg-ctrl > *,
.tpg-card.tpg-framed .tpg-ctrl > *:hover,
.tpg-card.tpg-framed .tpg-foot > *,
.tpg-card.tpg-framed .tpg-foot > *:hover,
.tpg-card.tpg-framed .tpg-foot > *[disabled],
.tpg-card.tpg-framed .tpg-foot > *[disabled]:hover,
.tpg-card.tpg-framed .tpg-foot > *.pri,
.tpg-card.tpg-framed .tpg-foot > *.pri:hover,
.tpg-card.tpg-framed .tpg-foot > *.pri[disabled]{
 background:none!important;background-color:transparent!important;
 box-shadow:none!important;text-shadow:none!important;
 border-color:transparent!important;color:#141416!important;opacity:1!important}
/* the grey hair between words is the ONE border these keep - and it has to
   out-weigh the [disabled] rule above, or Submit loses its divider */
.tpg-card.tpg-framed .tpg-foot > *,
.tpg-card.tpg-framed .tpg-foot > [class$="-hud"] > *,
.tpg-card.tpg-framed .tpg-foot > .tps-list > *{border-left:0!important}

/* A CLOCK CHANGES WIDTH AS IT TICKS. 0:09 to 0:10 is a whole digit, and the
   bottom line is solved from the width of its words - so the line crept every
   ten seconds. Tabular figures and a fixed measure hold it still. */
.tpg-card.tpg-framed .tps-time,
.tpg-card.tpg-framed .tpm-time,
.tpg-card.tpg-framed .tpp-time,
.tpg-card.tpg-framed [class$="-hud"] > *{font-variant-numeric:tabular-nums!important}
/* tabular figures alone hold the width: every digit is the same measure, so
   0:09 to 0:10 no longer changes the line. A min-width was tried and made it
   worse - it breaks the solver's model, because shrinking the padding then
   stops shrinking the line. */

/* NOTHING WHISPERS. A disabled Submit, the Mistakes-left label and the
   game's message were all set in grey; on a card built of black type they
   read as broken rather than quiet. */
.tpg-card.tpg-framed .tpg-foot > *,
.tpg-card.tpg-framed .tpg-foot > * *,
.tpg-card.tpg-framed .tpg-lives,
.tpg-card.tpg-framed > .tpg-msg,
.tpg-card.tpg-framed .tpg-ctrl > *{color:#141416!important;opacity:1!important}

/* ---- ONE CHARACTER -------------------------------------------------------
   Every board that is a grid gets Sudoku's treatment: one outlined block,
   hairline seams drawn as cell borders (a 1px gap lands on a half pixel at
   dpr 2 and a seam vanishes), no rounded corners, no drop shadows. */
.tpg-card.tpg-framed .tpm-board,
.tpg-card.tpg-framed .tps-grid{border:1px solid rgba(20,20,22,.55)!important;background:transparent!important;
 gap:0!important;border-radius:0!important}
/* Pips' cells do not fill a 480 frame - they are a shape, not a grid - so the
   frame hugs them instead of leaving a field of nothing on the right */
.tpg-card.tpg-framed .tpp-board{border:1px solid rgba(20,20,22,.55)!important;background:transparent!important;
 gap:0!important;border-radius:0!important;width:var(--tppw,246px)!important;height:var(--tpph,246px)!important;margin:0 auto!important}
.tpg-card.tpg-framed .tpm-board > *,
.tpg-card.tpg-framed .tps-grid > *,
.tpg-card.tpg-framed .tpp-board > *{border:0!important;border-left:1px solid rgba(20,20,22,.26)!important;
 border-top:1px solid rgba(20,20,22,.26)!important;border-radius:0!important;box-shadow:none!important;
 margin:0!important;min-width:0!important}
.tpg-card.tpg-framed .tpm-board > *{background:#efece7!important}
/* the rows have to stretch or the forced height leaves a band of nothing
   under the last row, and every face inside must be square-cornered */
.tpg-card.tpg-framed .tpm-board,
.tpg-card.tpg-framed .tps-grid{grid-auto-rows:1fr!important;align-content:stretch!important}
.tpg-card.tpg-framed .tpm-board *,
.tpg-card.tpg-framed .tpp-board *,
.tpg-card.tpg-framed .tps-grid *{border-radius:0!important;box-shadow:none!important}
/* the instruction lines belong in How to play, not on the card */
.tpg-card.tpg-framed .ph{display:none!important}

/* every list of words the game shows is the same black caps as the controls */
.tpg-card.tpg-framed .tps-list,
.tpg-card.tpg-framed .tpb-left,
.tpg-card.tpg-framed .tpc2-list,
.tpg-card.tpg-framed .tpb-found{font-size:10px!important;letter-spacing:1.6px!important;
 text-transform:uppercase!important;font-weight:700!important;color:#141416!important;line-height:1.6!important}

/* the pieces that float in a forced-height frame get centred in it rather
   than pinned to its top corner */
.tpg-card.tpg-framed .tpm-wrap,
.tpg-card.tpg-framed .tpb-comb,
.tpg-card.tpg-framed .tpc2-box{display:flex!important;align-items:center!important;justify-content:center!important}
/* MINI CROSSWORD. Side by side inside a 500 rule left the clue column 129
   wide and every clue broke into a two-word ladder. The grid sits above the
   clues instead, and the clues run as two columns on the full 500. */
.tpg-card.tpg-framed .tpm-wrap{flex-direction:column!important;align-items:center!important;
 width:500px!important;max-width:500px!important;gap:38px!important}
/* the grid keeps its own size - forcing one left a band of nothing
   inside its own border */
.tpg-card.tpg-framed .tpm-wrap > .tpm-grid{flex:0 0 auto!important}
.tpg-card.tpg-framed .tpm-wrap > .tpm-clues{width:500px!important;max-width:none!important;
 display:flex!important;flex-direction:row!important;align-items:stretch!important;gap:0!important;
 border-top:1px solid rgba(20,20,22,.26)!important;padding-top:20px!important}
/* two columns with a hairline between, both reading from their own left edge.
   The lists carry no indent, so the clue numbers line up under the A of
   ACROSS rather than sitting in from it. */
.tpg-card.tpg-framed .tpm-wrap > .tpm-clues > *{flex:1 1 0!important;min-width:0!important;
 max-width:none!important;padding:0 24px!important;margin:0!important;text-align:left!important;
 display:block!important;border-top:0!important}
.tpg-card.tpg-framed .tpm-wrap > .tpm-clues > *:first-child{padding-left:0!important}
.tpg-card.tpg-framed .tpm-wrap > .tpm-clues > *:last-child{padding-right:0!important}
.tpg-card.tpg-framed .tpm-wrap > .tpm-clues > * + *{border-left:1px solid rgba(20,20,22,.26)!important}
.tpg-card.tpg-framed .tpm-wrap > .tpm-clues > * *{text-align:left!important}
.tpg-card.tpg-framed .tpm-wrap > .tpm-clues ol{padding-left:0!important;margin:0!important;
 /* the clue numbers ARE the list markers - list-style:none deletes them.
    Inside, with no padding, so the 1 starts under the A of ACROSS. */
 list-style-position:inside!important}

/* ---- Word Groups ---------------------------------------------------------
   The tiles were 107 wide inside a 125.5 column, so a selected tile painted a
   black slab floating inside its own cell. They fill the cell now and the
   grid is one outlined block with hairline seams, like Sudoku's keys. */
.tpg-card.tpg-framed .tpg-board{gap:0!important;background:transparent!important;
 border:1px solid rgba(20,20,22,.55)!important;width:500px!important;
 /* the template was four fixed 125.5px columns; widened, the slack all went
    to one column and the block read lopsided. minmax(0,1fr) also stops a long
    word like PLACEMENT from bullying its column wider. */
 grid-template-columns:repeat(4,minmax(0,1fr))!important;
 /* Sudoku's card measures 660 x 782.4 CSS. Word Groups was 660 x 590 - same
    width, 192 shorter - so the two read as different sizes side by side.
    Four rows at 114.03 puts it at 660 x 782.4 exactly. */
 grid-auto-rows:128.86px!important}
/* the seams are borders on the cells, not a 1px gap showing the ground -
   at dpr 2 a 1px gap lands on a half pixel and one seam vanishes */
.tpg-card.tpg-framed .tpg-board .tpg-t{width:100%!important;height:100%!important;min-width:0!important;
 border:0!important;border-left:1px solid rgba(20,20,22,.26)!important;
 border-top:1px solid rgba(20,20,22,.26)!important;
 border-radius:0!important;background:#efece7!important;margin:0!important}
.tpg-card.tpg-framed .tpg-board .tpg-t:nth-child(4n+1){border-left:0!important}
.tpg-card.tpg-framed .tpg-board .tpg-t:nth-child(-n+4){border-top:0!important}
/* a selected cell still has to show its seams. The seam is a border on the
   cell, so a black cell was drawing a dark hair on a dark ground and the grid
   broke open wherever you selected. Light hair on black, same weight. */
.tpg-card.tpg-framed .tpg-board .tpg-t.sel{background:#141416!important;color:#fff!important;
 border-left-color:rgba(255,255,255,.34)!important;border-top-color:rgba(255,255,255,.34)!important}

/* MISTAKES LEFT - 4, as type. The pips themselves are hidden; tp-game-head
   counts them and writes the number, so it still falls as you lose. */
.tpg-card.tpg-framed .tpg-lives{width:500px!important;
 /* its ink sits 1.2 low in its own line box - the gap above it read 36.8 */
 margin-top:1.2px!important;
 display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important}
.tpg-card.tpg-framed .tpg-lives i{display:none!important}
.tpg-card.tpg-framed .tpg-livesn{font-weight:700!important;color:#141416!important}

/* the empty rows again, without the shell prefix - not every card is mounted
   inside .tpg-shell, and the prefixed rule silently missed those. */

.tpg-card.tpg-framed > .tpg-btns:empty{min-height:0!important;height:0!important;margin:0!important}

/* WHY THIS IS STILL .tps-card ONLY. The frame was tried on all eight and the
   spacing, the rules, the type and the centring all landed - but the cards do
   not hold the same rows:
     grid    trailing rows sit AFTER the control row, so the foot gap read 312
     mini, sweep, memory   their control row holds nothing but Start over, so
                           moving it up leaves the foot line empty
     pips    has no button whose text is Start over at all
     box     says Restart, bee's foot is Delete / Shuffle / Enter
   Each of those is a decision about what belongs in the two lines, not a
   measurement. So they are done one at a time. */

.tpg-shell .tpg-card.tpg-framed.tpg-fs,#tpgwrap .tpg-card.tpg-framed.tpg-fs{padding:72px 48px!important}

/* ---- SELECTION, ONE MECHANISM -------------------------------------------
   Two readings of "black box when selected", switched by a class on <html>
   so both can be looked at against the same build:
     .tpg-mono  - black is the only mark. No orange anywhere in a game.
     (default)  - orange is the LIVE cell (the one the keyboard is on),
                  black is a cell you have selected.
   ------------------------------------------------------------------------ */
html.tpg-mono .tpg-card.tpg-framed .tpb-in .mid{color:#141416!important}
html.tpg-mono .tpg-card.tpg-framed .tpb-cell.mid polygon{fill:#141416!important}
html.tpg-mono .tpg-card.tpg-framed .tpb-w.pan{background:#141416!important}
html.tpg-mono .tpg-card.tpg-framed .tpc2-n.on circle{fill:#141416!important;stroke:#141416!important}
html.tpg-mono .tpg-card.tpg-framed .tpc2-word .lock{color:#141416!important}
html.tpg-mono .tpg-card.tpg-framed .tpl-c.sel{background:#141416!important;color:#fff!important}
html.tpg-mono .tpg-card.tpg-framed .tpl-c.bad{color:#141416!important}
html.tpg-mono .tpg-card.tpg-framed .tpm-grid .tpm-c.sel{background:#141416!important;color:#fff!important}
html.tpg-mono .tpg-card.tpg-framed .tpp-tag.ok{background:#141416!important}
html.tpg-mono .tpg-card.tpg-framed .tpp-t.on{border-color:#141416!important;
 box-shadow:0 0 0 2px rgba(20,20,22,.22)!important}

/* tpq-hdrstick — 2026-09-17
   Measured at 1512: Variety's header is position:sticky, top:0, and stays pinned at
   0 at every scroll depth. The Position's had NO position rule at all, so it was
   static and scrolled away (top read -150 / -400 / -900). The phone was already
   sticky in mobile.css, which is why this is desktop only (mobile.css owns
   max-width:760px).

   And the line under the top banner: both sites paint the SAME 1px #8c8271 section
   boundary there (VP y466, TP y467). On Variety you never see it because the hero
   above it is a near-black photograph; on The Position the masthead above it is pale,
   so the same taupe reads as a dark bar. Removed on the first section only — every
   other boundary on the site keeps the locked colour. */
@media (min-width:761px){
 .mobx > header{position:sticky!important;top:0!important;z-index:100!important}
 /* the banner's own bottom hairline is written by site.js (editorialRules) so it
    matches the header's; the section below it has its top rule cleared there too. */
}
/* tpq-hdrstick */

/* tpq-honeypot — the Netlify honeypot never paints, at any width */
#subwrap form p[hidden],#subwrap form input[name="bot-field"]{display:none!important}

/* tpq-mini-foot-all */
/* 2026-09-18: "Puzzle 1 of 3" was printed twice on every width - once in the
   head row and again in a footer row carrying a divider, 38 of margin and 20 of
   padding. The footer row is dropped while it holds nothing but that count, and
   comes straight back when a finished puzzle puts the next-puzzle button into
   it. SCOPED to the crossword: Memory Match's counters row carries the same
   .tpm-tools class and holds only spans, so an unscoped rule hid its time,
   moves and pairs too. */
#tpmwrap .tpg-btns.tpm-tools:not(:has(button)){display:none!important}

/* tpq-pips-slot */
/* 2026-09-18: rotating a domino changed the TILE's shape - the svg went from
   72x36 to 36x72 and the tray re-wrapped under your finger, which is why the
   screen jumped on Rotate. The slot is a fixed square now and the domino turns
   inside it, so the tray holds still whatever you rotate. */
.tpp-t{display:flex!important;align-items:center!important;justify-content:center!important;
 box-sizing:border-box!important;width:60px!important;height:60px!important;
 min-width:60px!important;min-height:60px!important;flex:0 0 auto!important}
/* the square has to hold the LONG side either way, so the domino comes down
   from 72x36 to 56x28 - a 60 slot instead of 76, which takes 16 of air off
   every tile and puts all seven on one line. */
.tpp-t svg{width:56px!important;height:28px!important}
.tpp-t.v svg{width:28px!important;height:56px!important}
/* 2026-09-18: the square slot made the TILE square, and since the white card
   and its border live on the button, the domino read as a square of dots. The
   slot stays square so the tray never moves, but the button is invisible now -
   the white body, the rounded corners and the selected ring are painted by the
   domino's own svg, so it looks like a domino whichever way it turns. */
.tpp-t{background:transparent!important;border:0!important;border-radius:0!important;
 box-shadow:none!important}
.tpp-t .tpp-body{fill:#fff!important;stroke:rgba(20,20,22,.2)!important;stroke-width:3!important}
.tpp-t.on{box-shadow:none!important}
.tpp-t.on .tpp-body{stroke:#c4ab67!important;stroke-width:6!important}

/* tpq-final-pass-2026-09-18 */
/* 1. Memory Match was the only puzzle off the set's tone, in TWO places, and the
      earlier fix was written inside the phone media query so the desktop never
      got it. The How-to-play cards were #e7ddcd on a #d8cbb6 border - a warm tan
      - and the ring on every face-down card was a 2.5px #c4b294, tan again. Both
      now sit on the same greys as the board. */
.tpsh-card{border:1px solid #cdc8bf!important;background:#dcd8d1!important}
.tpm-board .tpm-c .tpm-back::before{border-color:rgba(20,20,22,.22)!important}
/* 2. the Bee's hint was being read as a heading: uppercase, letterspaced serif
      caps across the whole line. It is information, so it reads as a sentence. */
/* written heavier than `.tpg-card.tpg-framed .tpg-foot > *`, which sets the
   uppercase and the 1.6 letterspacing on everything in the foot line */
html body .tpg-card.tpg-framed .tpg-foot > .tpb-left.tpb-left,
html body .tpg-card.tpg-framed .tpb-left.tpb-left,
html body .tpg-card .tpb-left.tpb-left{
 text-transform:none!important;letter-spacing:normal!important;
 font:400 13px/1.5 "Iowan Old Style",Georgia,serif!important;color:#6b665e!important;
 text-align:center!important;white-space:normal!important}
/* 3. the crossword's last clue carried a 9px bottom margin, so the card closed
      on 45 of air against 34 at the top. */
.tpm-clues ol li:last-child{margin-bottom:0!important}


/* tpq-hud-no-rules-2026-09-18 */
/* No vertical hairlines anywhere in a hud. Letter Chain still painted one
   before "Letters left - 12" and Pips one before "Left - 7": the divider rule
   is written on every hud's `> * + *`, so removing the separators from the foot
   never reached them. The row's own gap is the separation. */
html body .tpg-card.tpg-framed [class$="-hud"] > * + *,
html body .tpg-card.tpg-framed .tpg-foot > .tps-list > * + *{border-left:0!important}

/* tpq-bee-line-down-2026-09-18 */
/* "Still out there ..." sat 4.1 under the hive's painted ink on desktop and 9.7
   on the phone, against 20.4 / 15.7 of air under it - the line read as stuck to
   the comb. The line moves DOWN to sit on the same air it already carries below;
   the hive is not touched, so the game is the same size. */
html body .tpg-card.tpg-card .tpb-left.tpb-left.tpb-left{margin-top:16px!important}

/* tpq-game-no-flash-2026-09-18 */
/* Every game opened with a jump: open() builds the card while its wrap is still
   hidden, so the first solve measured nothing and the zoom landed a frame or two
   later. Measured on all eight, both widths - the card stood 800 tall at y=40 and
   then snapped to its solved height (800 -> 728.5 on Word Groups, 800 -> 444.8 on
   Pips). The card is now invisible until fit() has written its zoom, so the first
   frame the reader sees is the solved one. The window itself is unchanged. */
html.tpg-opening div[id$="wrap"] .tpg-card{opacity:0!important}
div[id$="wrap"] .tpg-card{transition:opacity .12s ease-out}

/* tpq-bee-score-size-2026-09-18 */
/* The score sat at 17px serif beside an 11px sans label - it read as a headline
   next to a caption. It is one of a pair, so it takes the pair's type. */
html body .tpg-card .tpb-rank .tpb-pts.tpb-pts{
 font:700 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
 letter-spacing:1.6px!important;color:#141416!important}

/* tpq-hud-stacked-2026-09-18 */
/* Letter Chain and Pips carried both readings on one line. Stacked, each reading
   is its own line and the row needs no divider between them. */
html body .tpg-card .tpc2-hud,
html body .tpg-card .tpp-hud{flex-direction:column!important;gap:7px!important}

/* tpq-games-ink-2026-09-18 */
/* Every word and every number in a game window is painted in the site's ink.
   Measured on all eight: the crossword's tile numbers and its ACROSS / DOWN
   labels, the Bee's "Still out there" line, the placeholders in the Bee and
   Letter Chain, the eyebrow, the close X and the bold counters inside the huds
   were all rendering somewhere between #6b665e and #c9c3b7 on a light card. */
div[id$="wrap"] .tpg-card .tpm-c i,
div[id$="wrap"] .tpg-card .tpm-clues h4,
div[id$="wrap"] .tpg-card .tpm-clues li,
div[id$="wrap"] .tpg-card .tpb-left,
div[id$="wrap"] .tpg-card .tpb-empty,
div[id$="wrap"] .tpg-card .tpc2-empty,
div[id$="wrap"] .tpg-card .ph,
div[id$="wrap"] .tpg-card .tpg-eyebrow,
div[id$="wrap"] .tpg-card .tpg-x,
div[id$="wrap"] .tpg-card [class$="-hud"] b,
div[id$="wrap"] .tpg-card [class$="-hud"] > *{color:#141416!important}

/* the crossword's tile numbers were 9px at .45 opacity on a white square and
   invisible on the orange one - they are the puzzle's index, so they read */
div[id$="wrap"] .tpg-card .tpm-c i{
 font:700 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
 opacity:1!important;letter-spacing:0!important}
div[id$="wrap"] .tpg-card .tpm-c.sel i{color:#fff!important}

/* tpq-hud-stack-air-2026-09-18 */
/* the two stacked readings sat 7 apart, tighter than the type is tall */
html body .tpg-card .tpc2-hud,
html body .tpg-card .tpp-hud{gap:13px!important}

/* tpq-bee-rank-tight-2026-09-18 */
/* BEGINNER and the score sat at opposite ends of a full-width track with a
   hand's width of nothing between them. The three parts are one group now. */
html body .tpg-card .tpb-rank.tpb-rank{
 width:auto!important;justify-content:center!important;gap:12px!important}
html body .tpg-card .tpb-rank .tpb-name.tpb-name{min-width:0!important}
html body .tpg-card .tpb-rank .tpb-bar.tpb-bar{flex:0 0 120px!important;width:120px!important}
html body .tpg-card .tpb-rank .tpb-pts.tpb-pts{min-width:0!important;text-align:left!important}
/* the last two greys: the Bee's hint line carries a doubled-class rule of its
   own, and the bold counts inside the Bee, Sudoku and Memory Match rows */
html body div[id$="wrap"] .tpg-card .tpb-left.tpb-left.tpb-left{color:#141416!important}
html body div[id$="wrap"] .tpg-card b{color:#141416!important}
/* the "Words you found" label and any other label wrapping its own count */
html body div[id$="wrap"] .tpg-card .tpb-found,
html body div[id$="wrap"] .tpg-card .tpb-found > *,
html body div[id$="wrap"] .tpg-card .tps-list,
html body div[id$="wrap"] .tpg-card .tps-list > *{color:#141416!important}

/* tpq-bee-chain-ink-2026-09-18 */
/* The hive was drawn with white gaps between the cells and a white letter in the
   middle; the chain's track was a 34%-grey square. Both are drawn in ink now. */
div[id$="wrap"] .tpg-card .tpb-cell polygon{stroke:#141416!important}
div[id$="wrap"] .tpg-card .tpb-cell.mid text{fill:#141416!important}
div[id$="wrap"] .tpg-card .tpc2-sq{stroke:#141416!important}
div[id$="wrap"] .tpg-card .tpc2-n circle{stroke:#141416!important}

/* tpq-game-label-size-2026-09-18 */
/* Every label and counter in a game window is 10px / 700 / 1.6. Three were not:
   Word Groups' lives read 10.5, and the Bee's rank and score read 11 at weight
   900 - so the top row and the bottom row did not match inside the same card. */
div[id$="wrap"] .tpg-card .tpg-livesn,
div[id$="wrap"] .tpg-card .tpb-name,
div[id$="wrap"] .tpg-card .tpb-pts,
div[id$="wrap"] .tpg-card .tpb-ct{font-size:10px!important;font-weight:700!important;letter-spacing:1.6px!important}
/* the score carries a doubled-class rule of its own on both widths */
html body div[id$="wrap"] .tpg-card .tpb-rank .tpb-pts.tpb-pts{font-size:10px!important}

/* tpq-msg-always-held-2026-09-18 */
/* The framed card already carries a slot for the message - its own rule, 38 of
   margin, 20 of padding and an 18 line, with the comment that it is always held
   so a card never changes height when a game speaks. A later rule hid the slot
   while it was empty, which is exactly what let the Letter Chain grow from 676.5
   to 742.2 on a wrong entry and re-centre the window 33 higher, moving Delete and
   Enter. The slot is held again, and nothing else about it is touched. */
html body div[id$="wrap"] .tpg-card.tpg-framed > .tpg-msg:empty{display:block!important}
/* the slot is border-box, so an empty one measured 18 against a filled 33.5 -
   the card still moved by the difference. One height for both states. */
html body div[id$="wrap"] .tpg-card.tpg-framed > .tpg-msg{
 min-height:58px!important;margin-top:20px!important;padding-top:38px!important}

/* tpq-select-scheme-2026-09-19 */
/* The native picker is drawn by iOS, not by the page: the only thing that
   decides whether it comes up as a WHITE sheet with a blue tick or the dark
   grey card with a white tick is the control's colour scheme. Variety's form is
   dark, so its pickers are the dark card - which is the one that was asked for.
   The field itself keeps the colours set elsewhere in this sheet; this changes
   the popover only. accent-color is left on the site's ink for the controls that
   do listen to it. */
html body select{color-scheme:dark!important;accent-color:#141416!important}
/* the closed field is light, so its own words are painted in ink. This is the
   paint colour only - the popover's rows take the system's colour for the dark
   scheme, which is what keeps them white on the dark card, the way Variety's
   read. */
html body select,
html body .mobx .fbox select{-webkit-text-fill-color:#141416!important}

/* ==========================================================================
   TP-MARK-ELEVATION — THE STANDARD s9
   The artwork is full bleed (painted edge == image edge) so the mark stays on
   the 46 / 22 column. The shadow is CSS, never baked: a baked shadow needs
   transparent margin and that margin is what walks the mark off the column.
   ========================================================================== */
html body div.mobx.mobx.mobx.mobx.mobx header .lg .ic,
html body div.mobx.mobx.mobx.mobx.mobx header .brand .ic,
html body div.mobx.mobx.mobx.mobx.mobx header a .ic,
html body footer.tpfoot.tpfoot a.tpf-mark .tpf-ic,
html body footer.tpfoot.tpfoot .tpf-ic.tpf-ic{
 filter:drop-shadow(0 1.5px 3px rgba(0,0,0,.30))!important}

/* 2026-10-16: the header follows Variety exactly - nav words at normal letter spacing (was -0.3px), active underline 4px below */
html:not(#q1):not(#q2):not(#q3):not(#q4):not(#q5) body .tpnav a{letter-spacing:normal!important}
html:not(#q1):not(#q2):not(#q3):not(#q4):not(#q5) body .tpnav a::after{bottom:-4px!important}
/* 2026-10-16: nav words 17px on every page (articles were 16.5) and the phone menu at normal letter spacing, as Variety */
html:not(#q1):not(#q2):not(#q3):not(#q4):not(#q5) body .tpnav a{font-size:17px!important}
html:not(#q1):not(#q2):not(#q3):not(#q4):not(#q5) body .mmenu nav a,html:not(#q1):not(#q2):not(#q3):not(#q4):not(#q5) body #mmenu nav a,html:not(#q1):not(#q2):not(#q3):not(#q4):not(#q5) body .tpmenu nav a{letter-spacing:normal!important}
/* the nav words sit exactly 32 apart, as Variety (no per-word nudges) */
html:not(#q1):not(#q2):not(#q3):not(#q4):not(#q5) body .tpnav a{margin:0!important}