/* ------------------------------------------------------------------------------
   Paid Memberships Pro, in the site's own hand.

   PMPro ships a full front-end stylesheet: 8px radii, grey hairlines, a blue
   submit button. Against ink on warm paper it reads as a different website
   bolted onto this one. Everything below maps PMPro's own class names onto the
   design tokens, so checkout, the account pages, invoices and cancellation all
   look like the publication rather than like a plugin.

   Loaded only on PMPro surfaces. Uses the same tokens as site.css and defines
   none of its own.
   ------------------------------------------------------------------------------ */


/* ---- PMPro drives its whole look from these, so they are the real lever.
   Fighting the rules one at a time loses to the variables; redefining the
   variables reaches every PMPro surface, including ones not styled below. ---- */
html:root{
  --pmpro--color--base:#FFFCF7;
  --pmpro--color--base-2:#F6F1E7;
  --pmpro--color--white:#FFFCF7;
  --pmpro--color--contrast:#0F0D0B;
  --pmpro--color--accent:#0F0D0B;
  --pmpro--color--accent--variation:#7B2D26;
  --pmpro--color--border:#0F0D0B;
  --pmpro--color--border--variation:#E2DBCD;
  --pmpro--base--border-radius:0;
  --pmpro--btn--border-radius:0;
  --pmpro--box-shadow:none;
  --pmpro--base--spacing--small:10px;
  --pmpro--base--spacing--medium:18px;
  --pmpro--base--spacing--large:34px;
  --pmpro--btn--top-bottom-padding:14px;
  --pmpro--btn--left-right-padding:26px;
}

/* ---- reset PMPro's shell ---- */
.pmpro_form,
.pmpro_section,
.pmpro_card{max-width:none;margin-inline:0}
.pmpro_card{background:var(--paper)!important;border:1px solid var(--rule-ink)!important;
  border-radius:0!important;box-shadow:none!important;padding:0!important;
  margin-bottom:var(--s6)!important}
.pmpro_card_title{margin:0;padding:var(--s4) var(--s5);border-bottom:1px solid var(--rule);
  background:var(--tint)}
h2.pmpro_card_title,h3.pmpro_card_title,.pmpro_card_title{
  font-family:var(--sans)!important;font-size:11px!important;font-weight:500!important;
  letter-spacing:.18em!important;text-transform:uppercase!important;
  color:var(--ink-soft)!important;margin:0!important}
.pmpro_card_content{padding:var(--s5)}
.pmpro_card_actions{padding:0 var(--s5) var(--s5)}

/* ---- headings and prose inside PMPro ---- */
.pmpro_form h1,.pmpro_section h1{font-family:var(--display);font-weight:400}
.pmpro_form p,.pmpro_section p,.pmpro_card_content p{font-family:var(--text);
  font-size:12pt;line-height:1.65;color:var(--ink-soft)}
.pmpro_font-large{font-size:1.15rem}
.pmpro_font-small,.pmpro_form_hint,.pmpro_hint{font-family:var(--sans)!important;
  font-size:12px!important;letter-spacing:.03em;color:var(--ink-faint)!important}

/* ---- fields ---- */
.pmpro_form_field{margin-bottom:var(--s4)}
.pmpro_form_label,.pmpro_form_field label,.pmpro_label{display:block;font-family:var(--sans)!important;
  font-size:11px!important;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft)!important;margin-bottom:var(--s2)}
.pmpro_form_input,
.pmpro_form input[type=text],.pmpro_form input[type=email],.pmpro_form input[type=password],
.pmpro_form input[type=tel],.pmpro_form input[type=number],.pmpro_form select,
.pmpro_form textarea{
  width:100%;box-sizing:border-box;
  font-family:var(--sans)!important;font-size:15px!important;
  padding:var(--s2) var(--s3)!important;
  background:var(--paper)!important;color:var(--ink)!important;
  border:1px solid var(--ink)!important;border-radius:0!important;
  box-shadow:none!important;height:auto!important;line-height:1.4!important}
.pmpro_form input:focus,.pmpro_form select:focus,.pmpro_form textarea:focus{
  outline:2px solid var(--accent)!important;outline-offset:-2px;border-color:var(--ink)!important}
.pmpro_form input::placeholder{color:var(--ink-faint);opacity:1}
.pmpro_form_field-required-asterisk,.pmpro_asterisk{color:var(--accent)}

/* two-up rows keep their grid, but on the site's gutter */
.pmpro_form_fields-inline,.pmpro_cols-2{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media(min-width:620px){.pmpro_form_fields-inline,.pmpro_cols-2{grid-template-columns:1fr 1fr}}

/* ---- buttons ---- */
.pmpro_btn,.pmpro_btn-submit,.pmpro_btn-submit-checkout,
.pmpro_form input[type=submit],.pmpro_form button[type=submit]{
  font-family:var(--sans)!important;font-size:11.5px!important;font-weight:500!important;
  letter-spacing:.16em!important;text-transform:uppercase!important;
  background:var(--ink)!important;color:var(--paper)!important;
  border:1px solid var(--ink)!important;border-radius:0!important;
  padding:var(--s2) var(--s4)!important;cursor:pointer;box-shadow:none!important;
  text-shadow:none!important;height:auto!important;line-height:1.6!important;
  transition:background .12s,border-color .12s,color .12s}
/* A filled button lightens to the grey every filled button on the site lightens to, and
   goes a step darker than that while it is held down. It used to fill with oxblood,
   which on these screens is now kept for the required asterisk, the rule down the side
   of an error and the focus ring. */
.pmpro_btn:hover,.pmpro_btn-submit:hover,
.pmpro_form input[type=submit]:hover,.pmpro_form button[type=submit]:hover{
  background:var(--ink-soft)!important;border-color:var(--ink-soft)!important;color:var(--paper)!important}
.pmpro_btn:active,.pmpro_btn-submit:active,
.pmpro_form input[type=submit]:active,.pmpro_form button[type=submit]:active{
  background:var(--ink-press)!important;border-color:var(--ink-press)!important;color:var(--paper)!important}
/* The quiet pair, a plain button and the cancel that stands beside a submit: an ink
   hairline and ink type on the paper, with no fill until they are touched. Then they
   take the same grey and the same press as the filled button above, and their type
   turns to paper with the fill, because ink on that grey is 2.43:1 and cannot be read.
   The plain button's hover is no longer named in the resting rule, where it pinned the
   transparent ground with an !important and would have held the fill off. */
.pmpro_btn-plain,.pmpro_btn-cancel{
  background:transparent!important;color:var(--ink)!important;border-color:var(--ink)!important}
.pmpro_btn-plain:hover,.pmpro_btn-cancel:hover{
  background:var(--ink-soft)!important;color:var(--paper)!important;border-color:var(--ink-soft)!important}
.pmpro_btn-plain:active,.pmpro_btn-cancel:active{
  background:var(--ink-press)!important;color:var(--paper)!important;border-color:var(--ink-press)!important}
.pmpro_btn-password-toggle{font-size:10px!important;padding:var(--s2) var(--s3)!important}

/* ---- messages ---- */
.pmpro_message,.pmpro_error,.pmpro_success,.pmpro_alert{
  font-family:var(--sans);font-size:14px;line-height:1.6;
  padding:var(--s3) var(--s4);border-radius:0;border:1px solid var(--rule-ink);
  background:var(--tint);color:var(--ink);margin-bottom:var(--s5)}
.pmpro_error,.pmpro_alert{border-left:3px solid var(--accent);background:var(--paper)}
.pmpro_success{border-left:3px solid var(--ink)}

/* ---- tables: invoices, billing history ---- */
.pmpro_table,.pmpro_account table,#pmpro_account table,.pmpro_invoice table{
  width:100%;border-collapse:collapse;font-family:var(--sans);font-size:13.5px}
.pmpro_table th,.pmpro_account table th{text-align:left;font-weight:500;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
  border-bottom:1px solid var(--rule-ink);padding:var(--s2) var(--s3) var(--s2) 0}
.pmpro_table td,.pmpro_account table td{border-bottom:1px solid var(--rule);
  padding:var(--s3) var(--s3) var(--s3) 0;color:var(--ink-soft);vertical-align:top}
.pmpro_table tr:last-child td{border-bottom:0}

/* ---- the account page's own sections ---- */
.pmpro_account,#pmpro_account{display:grid;gap:var(--s6)}
.pmpro_account-membership h2,.pmpro_account h2,#pmpro_account h2{
  font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);padding-bottom:var(--s2);
  border-bottom:1px solid var(--rule-ink);margin-bottom:var(--s4)}
.pmpro_account-links ul,.pmpro_account ul{list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5)}
.pmpro_account-links a{font-family:var(--sans);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft)}
.pmpro_account-links a:hover{color:var(--ink)}

/* ---- checkboxes and radios keep the square ---- */
.pmpro_form input[type=checkbox],.pmpro_form input[type=radio]{
  width:auto!important;accent-color:var(--ink);margin-right:var(--s2)}
.pmpro_form input[type=radio]{border-radius:50%!important}

/* ---- things PMPro shows that this site does not want ---- */
.pmpro_level-discount-applied,.pmpro_powered-by{display:none}

/* The checkout title is centred; the submit row underneath was pinned to the left.
   PMPro lays the row out as a flex container, so text-align reaches nothing in it and
   the button's wrapper is blockified at the button's width: the row itself has to
   centre its items. Measured, not eyeballed: the button's centre now sits on the
   title's. */
.pmpro_form_submit,.pmpro_submit,.pmpro_checkout-submit{justify-content:center;text-align:center;flex-wrap:wrap}
/* The processing notice shares the row and dragged the button 47px off centre as a pair. It takes its own line. */
.pmpro_form_submit #pmpro_processing_message{flex:0 0 100%;text-box:trim-start cap alphabetic}
/* The notice is shown only while the form is sending. PMPro hides it with visibility,
   which keeps its box: a hidden line and the row's gap over it stood 45px of empty
   form under the button, over the page's own space below. PMPro's script writes the
   state into the notice's style attribute and nowhere else, so that attribute is what
   is read here. Hidden, it takes no space. Shown, the script rewrites the attribute to
   visible, the rule no longer matches, and the line sits var(--s4) under the button at
   its capitals, the form's own step from one element to the next. The button and the
   submit event are not touched. */
.pmpro .pmpro_form_submit{row-gap:var(--s4)}
.pmpro_form_submit #pmpro_processing_message[style*="hidden"]{display:none}

/* ---- PMPro's nested rules ----------------------------------------------------------
   PMPro writes its rules inside .pmpro, so each is two classes and outranked the one
   class rules above: the card's header band had 34px over its label and none under it,
   the content 10px over and 34px under, the fields 46px apart. These carry one class
   more, and this file loads after PMPro's. */
.pmpro .pmpro_card .pmpro_card_title{padding:var(--s4) var(--s5)}
.pmpro .pmpro_card .pmpro_card_content,
.pmpro .pmpro_section .pmpro_card .pmpro_card_title + .pmpro_card_content{padding:var(--s5)}
.pmpro .pmpro_card .pmpro_card_content > :first-child{margin-top:0}
.pmpro .pmpro_card .pmpro_card_content > :last-child{margin-bottom:0}
.pmpro .pmpro_card .pmpro_card_actions{padding:var(--s4) var(--s5)}
/* One form rhythm, as in site.css: var(--s4) from a field to the next label's
   capitals, var(--s2) from a label to its field. */
.pmpro .pmpro_form_fields{gap:var(--s4)}
.pmpro .pmpro_form_field{gap:0;margin-bottom:0}
.pmpro .pmpro_form_field .pmpro_form_label{display:block;margin-bottom:var(--s2);text-box:trim-start cap alphabetic}
.pmpro .pmpro_form_field-password-toggle{margin-bottom:var(--s2)}
.pmpro .pmpro_form_field-password-toggle .pmpro_form_label{margin-bottom:0}
/* At checkout PMPro sets Show Password in the password's label row, beside the label.
   Drawn as a bordered 42px box it made that row three times the height of the label
   next to it, and put the password field 28.6px under the confirm field beside it on a
   desktop. The control is a word and an eye, not a button box: it keeps its place at
   the row's right edge but is centred on the label and takes no height, so the row is
   the label's own and every label and field of the form shares one line and one step.
   Its wrapper keeps the label's height and margin, so the control centres on the label
   and stops clear of the field under it. */
.pmpro #pmpro_user_fields .pmpro_form_field-password .pmpro_form_field-password-toggle{
  position:relative;align-self:stretch;width:0;margin-bottom:var(--s2)}
.pmpro #pmpro_user_fields .pmpro_form_field-password .pmpro_form_field-password-toggle > .pmpro_btn-password-toggle{
  position:absolute;right:0;top:50%;transform:translateY(-50%);white-space:nowrap;
  padding:0!important;border:0!important;background:none!important;color:var(--ink-soft)!important;line-height:1!important}
.pmpro #pmpro_user_fields .pmpro_form_field-password .pmpro_form_field-password-toggle > .pmpro_btn-password-toggle:hover{color:var(--ink)!important}
/* The control lost its box, and with it most of the area a finger can hit on this
   payment form. An empty layer round it widens that area without moving anything,
   and stops short of the password field below so the field keeps its own clicks. */
.pmpro #pmpro_user_fields .pmpro_form_field-password .pmpro_form_field-password-toggle > .pmpro_btn-password-toggle::after{
  content:"";position:absolute;inset:-12px -12px -6px}
/* With no box round it, the control shows it has the keyboard by the site's own focus ring.
   PMPro's button:focus rule took the outline away, so a tabbing reader lost their place here. */
.pmpro #pmpro_user_fields .pmpro_form_field-password .pmpro_form_field-password-toggle > .pmpro_btn-password-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* The last section ends the page on the module's own var(--flow), as every page does.
   PMPro's 68px margin under it stood on top of that flow. */
.pmpro .pmpro_section:last-child{margin-bottom:0}
/* On a phone the checkout button runs the width of the column, as every other
   primary button does there. */
@media(max-width:680px){
  .pmpro_form_submit > #pmpro_submit_span{flex:1 1 100%}
  .pmpro_form_submit .pmpro_btn-submit-checkout{width:100%!important}
}
/* Table cells, at PMPro's own specificity and after it: its nested rule left every cell
   10px of padding in place of the rhythm above. */
.pmpro .pmpro_table thead tr th{padding:var(--s2) var(--s3) var(--s2) 0}
.pmpro .pmpro_table tbody tr td{padding:var(--s3) var(--s3) var(--s3) 0}
/* On a phone PMPro turns each cell into a label and a value, the label read from the
   cell's data-title. The billing history's cells carry none, so every cell opened on a
   bare colon with its value pushed to the right. A cell with no title stays one value. */
@media(max-width:767px){
  .pmpro .pmpro_table tbody tr td:not([data-title]){display:block}
  .pmpro .pmpro_table tbody tr td:not([data-title])::before{content:none}
}
/* The billing page is one column set left: PMPro's own line of plain text at the top,
   the section's heading, its card, and the link out at the foot. Centring the line
   under the title, with the link pushed to the right edge, put three axes on one short
   page. */
.pmpro-billing .pmpro_actions_nav{justify-content:flex-start}
.pmpro-billing .pmpro_actions_nav :is(.pmpro_actions_nav-left,.pmpro_actions_nav-right){text-align:start}
/* The link out stands the card's own margin under it, var(--s6), starting at its
   capitals. PMPro's 68px section margin on top of that left it floating 74.7px under
   the card, further than anything else on the page stands from its neighbour. */
.pmpro-billing .pmpro_section:has(+ .pmpro_actions_nav){margin-bottom:0}
.pmpro-billing .pmpro_actions_nav > span{text-box:trim-start cap alphabetic}
/* A card that holds a table is measured to the letters, as every card's content is:
   var(--s5) from the border to the capitals of the heading row and from the last row's
   baseline to the border. The cells' own padding and leading stood on top of the card's,
   and made it 39px over the labels and 46px under the last row at 768. On a phone the
   heading row is hidden and each cell is a line of its own, so the first cell and the
   last cell carry the card's edges. */
@media(min-width:768px){
  .pmpro .pmpro_card_content > .pmpro_table:first-child thead tr:first-child th{padding-top:0;text-box:trim-start cap alphabetic}
  .pmpro .pmpro_card_content > .pmpro_table:last-child tbody tr:last-child td{padding-bottom:0;text-box:trim-end cap alphabetic}
}
@media(max-width:767px){
  .pmpro .pmpro_card_content > .pmpro_table:first-child tbody tr:first-child td:first-child{padding-top:0;text-box:trim-start cap alphabetic}
  .pmpro .pmpro_card_content > .pmpro_table:last-child tbody tr:last-child td:last-child{padding-bottom:0;text-box:trim-end cap alphabetic}
}

/* ---- Cancelling ----
   The cancel page is two screens. The first lists what is running, with a bare link
   in the last cell that sat on the row's rule and read as struck through. The second
   asks the question, and printed its two answers at different widths, the plain one
   narrower than the submit above it. Both screens now answer in the site's own full
   width buttons and in the site's own inks: the cancel was printed in oxblood on both
   screens, and it is the filled button here as it is everywhere else, since a colour
   of its own only raised the voice of a page that is read carefully already. The pair
   on the confirmation stay the same size as each other, so the shape of a button never
   leans on the answer. */
/* The cell's own right padding would hold the button 14px short of the card's
   edge, so the last column gives it up and the button runs the content's width. */
#pmpro_cancel .pmpro_table_cancel-action{vertical-align:middle;padding-right:0}
#pmpro_cancel .pmpro_table_cancel-action a{
  display:block;width:100%;box-sizing:border-box;text-align:center;
  font-family:var(--sans);font-size:11.5px;font-weight:500;line-height:1.6;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  padding:var(--s2) var(--s4);
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  transition:background .12s,border-color .12s,color .12s}
#pmpro_cancel .pmpro_table_cancel-action a:hover{background:var(--ink-soft);border-color:var(--ink-soft);color:var(--paper)}
#pmpro_cancel .pmpro_table_cancel-action a:active{background:var(--ink-press);border-color:var(--ink-press);color:var(--paper)}
/* The confirmation: one column, two buttons of one size. Neither answer carries a
   colour of its own now. The submit takes the filled button's three inks and the plain
   one beside it the quiet button's, from the rules at the top of this file, so what is
   set here is size alone, and it is set for both answers at once. */
#pmpro_cancel .pmpro_form_submit{display:flex;flex-direction:column;align-items:stretch;gap:var(--s3)}
#pmpro_cancel .pmpro_form_submit .pmpro_btn{
  display:block;width:100%!important;box-sizing:border-box;text-align:center;text-decoration:none}
/* On the narrowest phones these labels are longer than the card. A submit cannot
   wrap its own value, so it was clipped mid word while the link beside it wrapped to
   two lines, which is how two buttons of one size came out 40px and 59px tall. The
   tracking gives way first, then the size: both labels then hold one line at 320. */
@media(max-width:400px){
  #pmpro_cancel .pmpro_form_submit .pmpro_btn{
    font-size:10.5px!important;letter-spacing:.06em!important;
    padding-left:var(--s2)!important;padding-right:var(--s2)!important}
}

/* A card band that holds nothing is not drawn: the billing card of a plan given by hand
   has no payment to list, and printed 64px of empty box between its name and Cancel. */
.pmpro .pmpro_card_content:not(:has(li,p,dl,table,form,input,select,button,a,img,h2,h3,h4)){display:none}
/* The words in each band of a card sit centred in it: trimmed to their capitals and
   their baseline, the band's padding is the space the eye sees over and under them. A
   band holding a button or a field is left as it is: trimmed, its button would hang into
   the padding. */
.pmpro :is(.pmpro_card_title,.pmpro_card_content,.pmpro_card_actions):not(:has(.pmpro_btn,button,input,select,textarea)){text-box:trim-both cap alphabetic}

/* The cancel table's row. The level's name is a value, not a heading: PMPro prints it in a
   th, which took the column heads' small capitals and their 10px padding, so on a desktop it
   sat 10.4px above its expiry and 7.6px above the Cancel button's centre. It now reads as
   the expiry does, and every cell of the row centres on one line: the same padding in each
   cell, and the words trimmed to their capitals so the capitals, not the line box, sit on
   the button's centre. On a phone each value keeps a label, both in the small capitals the
   level's label already had; "Expiration:" was set in the plain 13.5px of its value. */
#pmpro_cancel .pmpro_table tbody th{font-family:var(--sans);font-size:13.5px;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--ink-soft);padding-left:0}
@media(min-width:768px){
  #pmpro_cancel .pmpro_table tbody tr > :is(th,td){vertical-align:middle;padding-top:var(--s3);padding-bottom:var(--s3)}
  #pmpro_cancel .pmpro_table tbody tr > th{padding-right:var(--s3)}
  #pmpro_cancel .pmpro_table tbody tr > :is(th,td):not(.pmpro_table_cancel-action){text-box:trim-both cap alphabetic}
  #pmpro_cancel .pmpro_card_content > .pmpro_table:last-child tbody tr:last-child > :is(th,td){padding-bottom:0}
}
@media(max-width:767px){
  #pmpro_cancel .pmpro_table tbody :is(th,td)[data-title]::before{font-family:var(--sans);font-size:10.5px;
    font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
  /* Label and value on one baseline, and every value starting at one edge: the labels sat at
     the top of a taller line, and each label column took a share of its own cell's width, so
     the two values started 1.3px apart. */
  #pmpro_cancel .pmpro_table tbody tr > :is(th,td)[data-title]{align-items:baseline;grid-template-columns:98px minmax(0,1fr)}
  /* The first row stands as far under the sentence as the rows stand from each other. */
  #pmpro_cancel .pmpro_card_content > .pmpro_spacer{display:none}
  #pmpro_cancel .pmpro_table tbody tr:first-child > th{padding-top:24px}
}