/* ============================================================
   spiritual-warfare.css — spiritual-warfare's own styles, moved out of the <style>
   block that followed styles.css in spiritual-warfare.html.
   Linked from the same place in the page, so the order is unchanged.
   ============================================================ */

/* ── Rules from styles.css used only by this page ── */

.doctors-list{
  display:grid;
  gap:28px;
  width:min(calc(100vw - 64px), var(--wide));
  margin:0 50% 44px;
  transform:translateX(-50%);
}

@media(max-width:860px){
  .doctors-list{width:auto;margin:0 0 44px;transform:none;}
}

@media screen{
  .exam-toc-intro{position:relative;isolation:isolate;display:flex;min-height:100%;flex-direction:column;justify-content:center;overflow:hidden;padding:46px 40px;border:1px solid rgba(201,168,90,.28);background:
    radial-gradient(circle at 24% 20%,rgba(201,168,90,.18),transparent 30%),
    linear-gradient(145deg,#17100a,#281a10);box-shadow:0 24px 58px rgba(47,31,17,.18);color:var(--paper);}
  .exam-toc-intro::before{content:"";position:absolute;inset:12px;z-index:-1;border:1px solid rgba(201,168,90,.14);pointer-events:none;}
  .exam-toc-intro::after{content:"EXAMEN";position:absolute;right:-.04em;bottom:-.14em;z-index:-1;color:rgba(201,168,90,.045);font:600 76px/1 var(--display);letter-spacing:-.05em;pointer-events:none;}
  .exam-toc-intro h2{margin:16px 0 20px;color:#f7eddc;font:500 clamp(36px,3.6vw,54px)/.98 var(--head);letter-spacing:-.025em;}
}

@media screen and (max-width:900px){
  .exam-toc-intro{min-height:auto;padding:38px;}
  .exam-toc-intro p{max-width:52ch;}
}

@media screen and (max-width:620px){
  .exam-toc-intro{padding:32px 26px;}
  .exam-toc-intro h2{font-size:38px;}
}

/* ── The page's own rules, from its <style> block ── */

/* ── Spiritual Warfare page-specific components (light theme) ── */
.sw .lede{font-family:var(--head);font-style:italic;font-size:22px;line-height:1.6;color:var(--muted);text-align:center;margin:0 auto 14px;}
.sw em.term{font-style:italic;color:var(--gold-deep);font-weight:500;}
.sw .latin{font-style:italic;color:var(--muted);}

/* The one-line thesis that opens each of the five parts */
.sw-thesis{font-family:var(--head);font-size:21px;line-height:1.55;color:var(--ink);border-left:3px solid var(--gold);padding-left:18px;margin:0 0 22px;}

/* Rubric — the red-letter subhead that divides a part into its practices */
.sw-rubric{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);margin:30px 0 10px;}
.sw-subhead{font-family:var(--head);font-size:clamp(21px,2.6vw,26px);font-weight:600;color:var(--ink);margin:28px 0 8px;}

/* Scripture, set as a passage with verse numbers */
.sw-scripture{margin:26px 0;padding:18px 24px;border-left:3px solid var(--gold);background:var(--paper-card);font-family:var(--head);font-size:20px;line-height:1.58;color:var(--ink);border-radius:0 8px 8px 0;}
.sw-scripture sup{font-family:var(--display);font-size:11px;color:var(--gold-deep);margin-right:2px;}
.sw-scripture cite{display:block;font-family:var(--display);font-style:normal;font-size:12px;letter-spacing:.12em;color:var(--gold-deep);margin-top:12px;text-transform:uppercase;}

/* An exorcist quoted in his own words */
.sw-quote{margin:24px 0;padding:0 0 0 22px;border-left:3px solid var(--rule);font-family:var(--head);font-style:italic;font-size:21px;line-height:1.5;color:var(--ink);}
.sw-quote p{margin:0;}
.sw-quote cite{display:block;font-family:var(--display);font-style:normal;font-size:12px;letter-spacing:.1em;color:var(--gold-deep);margin-top:10px;text-transform:uppercase;line-height:1.5;}

/* ── Tables ──
   The reference tables run three and four columns wide and will not sit in a
   720px reading measure without scrolling sideways. So the wrapper breaks out
   of the measure up to --wide, by the same idiom .doctors-list uses: a width
   capped to the viewport, margin-left to the centre line, then pulled back
   half its own width. Capping the width at 100vw - 64px is what keeps the
   page itself from ever gaining a horizontal scrollbar. The prose stays at
   720px; only the tables take the extra room. */
.sw .sw-table-wrap{
  width:min(calc(100vw - 64px), var(--wide));
  margin:26px 50%;
  transform:translateX(-50%);
  border:1px solid var(--rule);
  border-radius:8px;
  overflow:hidden;
}
/* The paired virtue tables sit in a two-column grid and take their width from
   the column, so they opt out of the breakout. */
.sw .sw-grid2 .sw-table-wrap{width:auto;margin:20px 0;transform:none;}

/* Fixed layout with declared column widths is what removes the scrollbar: a
   long cell wraps inside its column instead of widening the whole table. */
.sw-table{width:100%;border-collapse:collapse;font-size:17px;table-layout:fixed;}
.sw-table th,.sw-table td{text-align:left;padding:11px 16px;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.5;overflow-wrap:break-word;}

/* The body rows are laid on white rather than on the page's own cream. The
   paper everything else is printed on is #f6f1e6 under a noise wash, and a
   table that shares it reads as prose that happens to have been set in
   columns — the head's 7% gold band ends up the only thing dividing a row of
   type from the margin beside it. On white the panel is a panel, and every
   measurement in it improves: the rule between rows gains half again as much
   definition (1.55:1 against white, 1.32:1 against the cream), body ink goes
   from 16.1:1 to 17.1:1, the gold-deep key cells from 5.4:1 to 5.8:1, and the
   italic sub-keys from 6.6:1 to 7.0:1. The noise texture also stops showing
   through behind eight lines of 14px italic, which is where it was costing
   the most.

   tbody only. The head keeps its gold tint, and read against white rows it
   now looks like a heading band instead of a slightly soiled patch of the
   same paper. Set on the row, not the cell, because the wide tables turn
   their rows into blocks under 860px and the fill has to follow. */
.sw-table tbody tr{background:#fff;}
.sw-table td.k{font-family:var(--head);font-size:19px;font-weight:600;color:var(--gold-deep);}
.sw-table td.k .sub-k{display:block;font-family:var(--body);font-size:14px;font-weight:400;font-style:italic;color:var(--muted);line-height:1.4;margin-top:3px;}

/* Below the point where three or four columns stop being legible, the wide
   tables stack: each row becomes a block and each cell carries its column
   heading. Still no sideways scrolling — the table simply changes shape. */
@media(max-width:860px){
  .sw-table-wide,.sw-table-wide tbody,.sw-table-wide tr,.sw-table-wide td{display:block;width:auto;}
  .sw-table-wide{table-layout:auto;}
  .sw-table-wide thead{display:none;}
  .sw-table-wide caption{display:block;padding:14px 18px 2px;}
  .sw-table-wide tr{border-bottom:1px solid var(--rule);padding:4px 0 16px;}
  .sw-table-wide tbody tr:last-child{border-bottom:none;}
  .sw-table-wide td{border-bottom:none;padding:5px 18px;}
  .sw-table-wide td.k{padding-top:15px;font-size:21px;}
  .sw-table-wide td[data-label]:not(.k)::before{
    content:attr(data-label);
    display:block;font-family:var(--display);font-size:10px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:3px;
  }
}

/* Two columns of shorter material. Widened by the same breakout as the
   tables: at the 720px measure each column is only ~311px, too narrow for the
   virtue tables beside it and cramped for the prose. */
.sw .sw-grid2{
  display:grid;grid-template-columns:1fr 1fr;gap:8px 44px;
  width:min(calc(100vw - 64px), var(--wide));
  margin:0 50%;
  transform:translateX(-50%);
}
@media(max-width:860px){
  .sw .sw-grid2{grid-template-columns:1fr;gap:8px;}
}

/* Where the exorcists differ */
.sw-differ{background:var(--paper-card);border:1px solid var(--rule);border-radius:8px;padding:20px 24px;margin:20px 0;}
.sw-differ h3{font-family:var(--head);font-size:22px;color:var(--gold-deep);margin:0 0 8px;}
.sw-differ p{margin:0;font-size:18px;line-height:1.62;}

/* Sources */
.sw-sources{list-style:none;padding:0;margin:18px 0 0;}
.sw-sources li{padding:10px 0 10px 22px;border-bottom:1px solid var(--rule);font-size:17px;line-height:1.55;position:relative;}
.sw-sources li::before{content:"\2726";position:absolute;left:0;top:12px;color:var(--gold);font-size:10px;}

/* Numbered steps */
.sw-steps{padding-left:24px;margin:18px 0 0;}
.sw-steps li{font-size:19px;line-height:1.6;margin-bottom:12px;padding-left:6px;}
.sw-steps li::marker{font-family:var(--display);color:var(--gold-deep);font-weight:600;}
/* ── Masthead framing ──
   The two temptations this page opens on sit at the very top of the fresco:
   the pinnacle of the temple (centre) and the cliff where the devil is cast
   down and the angels minister (right). The shared masthead slide is inset
   -2% and scaled 1.035-1.075 for a slow drift, which shaves ~3.5% off every
   edge — enough to decapitate the figures on the pediment and clip the
   rightmost angel. Anchor the crop to the top edge and drop the zoom. */
.masthead .masthead-slide{
  inset:0;
  transform:none;
  transition:opacity 1.6s ease-in-out;
  background-position:center top;
}
.masthead .masthead-slide.is-active{transform:none;}
@media(max-width:640px){
  /* styles.css re-centres the crop on narrow screens; keep the top anchored. */
  .masthead .masthead-slide{background-position:center top;}
}
/* This fresco reads darker than its neighbours through the shared veil
   (mean luminance 108 vs 148 for metaphysics), and the scenes the page names
   are the ones being dimmed. Lift the veil to roughly parity. */
.masthead::before{
  background:
    linear-gradient(180deg,rgba(26,18,11,.50) 0%,rgba(26,18,11,.66) 70%,rgba(26,18,11,.86) 100%),
    radial-gradient(ellipse at 50% 28%,rgba(201,168,90,.08),rgba(26,18,11,.34) 68%);
}
/* Soften the side vignette so the cliff scene on the right is not buried. */
.masthead::after{
  background:
    linear-gradient(90deg,rgba(18,11,6,.32),transparent 16%,transparent 86%,rgba(18,11,6,.20)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* ────────────────── THE ST MICHAEL CARD ──────────────────
   A devotional card of Leo XIII's longer prayer to St Michael, offered at the
   head of the page: opened over the page in a dialog, and printable from
   inside it. It stands where the breadcrumb used to, which is the one line on
   the page a reader's eye already goes to before the prose starts.

   The trigger is a real link to the image file, the same contract
   reading-modal.js keeps: with JavaScript off, or on a middle click, it opens
   the plate itself and the reader loses nothing. Only the plain left click is
   intercepted. */
.sw-cardbar{
  max-width:var(--wide);margin:0 auto;padding:18px 32px 0;
  display:flex;justify-content:center;
}
.sw-cardbtn{
  display:inline-flex;align-items:center;gap:12px;
  padding:12px 26px;border-radius:2px;
  border:1px solid var(--gold-deep);background:var(--paper-card);
  font-family:var(--display);font-size:11.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;line-height:1;
  color:var(--gold-deep);text-decoration:none;cursor:pointer;
  transition:background-color .22s ease,color .22s ease,box-shadow .22s ease;
}
.sw-cardbtn:hover,.sw-cardbtn:focus-visible{
  background:var(--gold-deep);color:var(--paper);
  box-shadow:0 6px 22px rgba(154,122,46,.22);
}
.sw-cardbtn:focus-visible{outline:1px solid var(--gold-deep);outline-offset:3px;}
/* The sword is drawn, not photographed: an icon font would be one more
   request and an emoji would not match the face. */
.sw-cardbtn svg{
  flex:none;width:15px;height:15px;fill:none;
  stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
/* Second line of the label on wide screens, dropped on narrow ones where the
   button would otherwise wrap into three lines. */
.sw-cardbtn .sw-cardbtn-note{
  font-weight:500;letter-spacing:.14em;color:inherit;opacity:.72;
}
@media(max-width:560px){
  .sw-cardbar{padding:14px 20px 0;}
  .sw-cardbtn{padding:11px 18px;font-size:10.5px;letter-spacing:.14em;gap:9px;}
  .sw-cardbtn .sw-cardbtn-note{display:none;}
}

/* ── the dialog ──
   Built on the same furniture as .reading-modal in styles.css — the scrim,
   the card of index paper, the Esc button top right — because a reader who
   has opened one popup on this site should recognise the next. What differs
   is what it holds: a single tall plate rather than a column of text, so the
   card is sized to the image's 3:4 and the plate itself is what scrolls when
   the viewport is too short to hold it. */
.sw-card-modal{
  position:fixed;inset:0;z-index:210;
  background:rgba(26,18,11,.78);
  opacity:0;pointer-events:none;
  transition:opacity .18s ease;
  display:flex;flex-direction:column;align-items:center;
  padding:0 18px;
  overflow-y:auto;overscroll-behavior:contain;
}
.sw-card-modal.active{opacity:1;pointer-events:auto;}
body.sw-card-open{overflow:hidden;}

.sw-card-card{
  width:100%;max-width:560px;
  margin:min(6vh,52px) 0 40px;
  background:var(--paper-card);
  border:1px solid var(--rule);
  border-radius:3px;
  display:flex;flex-direction:column;
}
.sw-card-head{padding:18px 22px 14px;border-bottom:1px solid var(--rule);}
.sw-card-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;}
.sw-card-kicker{
  font-family:var(--display);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-deep);padding-top:4px;
}
.sw-card-close{
  flex:none;background:none;cursor:pointer;
  border:1px solid var(--rule);border-radius:2px;
  color:var(--muted);padding:4px 8px;
  font-family:var(--display);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  transition:color .2s,border-color .2s;
}
.sw-card-close:hover{color:var(--ink);border-color:var(--gold);}
.sw-card-close:focus-visible{outline:1px solid var(--gold);outline-offset:2px;}
.sw-card-title{
  margin:6px 0 0;
  font-family:var(--head);font-size:clamp(21px,3.2vw,26px);font-weight:600;
  color:var(--ink);line-height:1.2;
}

.sw-card-plate{
  margin:0;padding:18px 22px;
  max-height:min(66vh,760px);
  overflow-y:auto;overscroll-behavior:contain;
}
.sw-card-plate:focus-visible{outline:1px solid var(--gold);outline-offset:-3px;}
.sw-card-plate img{
  display:block;width:100%;height:auto;
  border:1px solid var(--rule);
  box-shadow:0 14px 34px rgba(60,45,25,.16);
}
/* The plate is a picture of words, and a picture cannot be read aloud. The
   prayer is carried in text for anyone on a screen reader, and clipped rather
   than hidden so it stays in the accessibility tree. */
.sw-card-said{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.sw-card-foot{
  padding:14px 22px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;
}
.sw-card-note{
  margin:0;flex:1 1 190px;
  font-family:var(--body);font-size:12px;line-height:1.5;color:var(--muted);
}
.sw-card-print{
  flex:none;margin-left:auto;cursor:pointer;
  padding:11px 22px;border:none;border-radius:4px;
  background:var(--gold-deep);color:#fff;
  font-family:var(--head);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  transition:background-color .2s ease;
}
.sw-card-print:hover{background:var(--gold);}
.sw-card-print:focus-visible{outline:1px solid var(--gold-deep);outline-offset:3px;}
@media(max-width:560px){
  .sw-card-card{margin-top:12px;}
  .sw-card-plate{max-height:58vh;padding-left:14px;padding-right:14px;}
  .sw-card-head,.sw-card-foot{padding-left:14px;padding-right:14px;}
  .sw-card-print{width:100%;margin-left:0;}
}
@media(prefers-reduced-motion:reduce){
  .sw-card-modal{transition:none;}
}

/* ────────────────── THE CONTENTS CARDS ──────────────────
   The four cards under Contents are the shared .prayer-toc furniture out of
   styles.css, which was drawn for the prayers index: a stack of short groups
   of roughly equal weight. This page's groups are lopsided — five entries,
   then four, then three, then two — and a grid row stretches every card to
   the height of its tallest member, so Know the Field and Reference each
   ended with an inch of empty paper hanging below their last line. That is
   what made them look unfinished rather than anything about the card itself.

   So: the card hugs what it holds, the heading is divided from the list by a
   rule of its own instead of borrowing the first entry's top border, and each
   entry carries the chevron that says it goes somewhere. The selectors all
   sit behind .sw-toc on the section, so none of the other pages built on
   .prayer-toc change by a pixel. */
.sw-toc .toc-list{align-items:start;gap:20px;}

/* Flat card stock with the light coming from one corner, in place of the
   shared 72%→42% vertical wash: at the width this page's measure allows, a
   wash that shallow reads as a smudge across the card rather than as a page
   lying on the paper. */
.sw-toc .toc-group{
  padding:20px 22px 8px;
  border-color:rgba(125,98,36,.26);
  border-radius:4px;
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.74),rgba(255,255,255,0) 64%),
    var(--paper-card);
  box-shadow:0 18px 34px -30px rgba(36,26,16,.66);
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
/* The inner hairline is the house's own binding mark — .exam-toc-intro and
   the reading modal both carry one — and it is the cheapest thing that keeps
   a card this plain from reading as an unstyled div. */
.sw-toc .toc-group::after{
  content:"";position:absolute;inset:5px;pointer-events:none;
  border:1px solid rgba(201,168,90,.16);border-radius:2px;
}
.sw-toc .toc-group:hover{
  border-color:rgba(125,98,36,.42);
  box-shadow:0 22px 40px -28px rgba(36,26,16,.72);
  transform:translateY(-2px);
}

/* The numeral was --gold on a 36%-white patch, which measures 3.7:1 against
   the card — short of the 4.5:1 that 10px type owes a reader. Filled with
   gold-deep and cut in paper-card it measures 5.4:1, and it reads as a seal
   stamped on the card besides. */
.sw-toc .toc-heading{
  margin:0 0 2px;
  padding-bottom:13px;
  border-bottom:1px solid rgba(201,168,90,.34);
  font-size:10.5px;
  letter-spacing:.19em;
}
.sw-toc .toc-heading::before{
  min-width:26px;height:26px;
  border-color:transparent;
  background:var(--gold-deep);
  color:var(--paper-card);
  font-size:9.5px;
  letter-spacing:.06em;
}

/* Each entry is a row of two: the title, and a chevron that leans out under
   the cursor. The shared card slid the whole line three pixels right instead,
   which on a card with a visible edge looks like the text has come loose from
   its column. The divider lives on `a + a`, so the list neither doubles the
   heading's rule at the top nor leaves one dangling under the last entry, and
   the hover tint bleeds eight pixels past the text on both sides so the row
   is a band rather than a highlighted phrase. */
.sw-toc .toc-group a{
  display:grid;
  grid-template-columns:minmax(0,1fr) 14px;
  gap:10px;
  align-items:baseline;
  margin:0 -8px;
  padding:9px 8px;
  border-top:0;
  border-radius:2px;
  font-size:16.5px;
  line-height:1.32;
  transition:color .2s ease,background-color .2s ease;
}
.sw-toc .toc-group a + a{border-top:1px solid rgba(221,208,180,.62);}
.sw-toc .toc-group a::after{
  content:"›";
  justify-self:end;
  color:rgba(154,122,46,.42);
  font:600 19px/1 var(--head);
  transition:color .2s ease,transform .2s ease;
}
.sw-toc .toc-group a:hover,
.sw-toc .toc-group a:focus-visible{
  transform:none;
  background:rgba(201,168,90,.09);
}
.sw-toc .toc-group a:hover::after,
.sw-toc .toc-group a:focus-visible::after{
  color:var(--gold-deep);
  transform:translateX(3px);
}
@media(max-width:760px){
  .sw-toc .toc-list{gap:16px;}
  .sw-toc .toc-group{padding:18px 18px 6px;}
}
@media(prefers-reduced-motion:reduce){
  .sw-toc .toc-group,
  .sw-toc .toc-group a,
  .sw-toc .toc-group a::after{transition:none;}
  .sw-toc .toc-group:hover{transform:none;}
  .sw-toc .toc-group a:hover::after,
  .sw-toc .toc-group a:focus-visible::after{transform:none;}
}
/* styles.css sets this list to 9pt/10pt for print, but those rules carry the
   same specificity as the ones above and sit earlier in the cascade, so the
   sizes have to be restated or the sheet would print at screen size. The
   chevrons and the two frames go, being cursor affordances and ink. */
@media print{
  .sw-toc .toc-heading{font-size:9pt;}
  .sw-toc .toc-group a{font-size:10pt;line-height:1.4;}
  .sw-toc .toc-group{box-shadow:none;}
  .sw-toc .toc-group::after,
  .sw-toc .toc-group a::after{display:none;}
}

/* ── printing the card ──
   The reader asked for a copy, not for the page with a copy on it, so a print
   started from inside the dialog prints the plate alone. Everything else in
   the body is dropped and the dialog is unpinned from the viewport, because a
   position:fixed element prints as one screenful and the plate is taller than
   that; its own scroll box has to be released for the same reason.

   The switch is a class on <html> rather than a media query on the dialog's
   state, since `hidden` is the only thing that marks the state and print
   rules cannot ask whether a scroll box was scrolled. The script sets it on
   beforeprint too, so a reader who ignores the button and hits Ctrl+P with
   the card open gets the card and not a screenshot of the scrim.

   No @page rule here on purpose: the site sets one globally — 0.6in by 0.5in,
   with the running head and foot in its margin boxes — and a page box
   redefined for this one print would be redefined for every other print from
   this page as well. So the plate is held inside the margin the sheet already
   has, and capped at 99vh rather than 100% width, because 3:4 across a
   letter sheet's 7.5in of usable width comes to 10in of height and the sheet
   has 9.8in. Height is the binding dimension; width follows it. */
@media print{
  html.sw-card-printing body > *:not(main):not(.sw-card-modal),html.sw-card-printing body > main > *:not(.sw-card-modal){display:none !important;}
  html.sw-card-printing .sw-card-modal{
    display:block !important;position:static !important;
    opacity:1 !important;pointer-events:auto !important;
    padding:0 !important;background:none !important;overflow:visible !important;
  }
  html.sw-card-printing .sw-card-card{
    max-width:none !important;margin:0 !important;
    border:0 !important;background:none !important;
  }
  html.sw-card-printing .sw-card-head,
  html.sw-card-printing .sw-card-foot{display:none !important;}
  html.sw-card-printing .sw-card-plate{
    max-height:none !important;overflow:visible !important;
    margin:0 !important;padding:0 !important;
    break-inside:avoid;page-break-inside:avoid;
  }
  html.sw-card-printing .sw-card-plate img{
    width:auto !important;height:auto !important;
    max-width:100% !important;max-height:99vh !important;
    margin:0 auto !important;border:0 !important;
  }
}

/* ── Single-element styles, once written inline on the page ──
   Each class carries what one style="" attribute said. They sit last in
   the page's cascade, as the attributes did; where a rule elsewhere
   matched the same element more specifically, the class is doubled so it
   still wins, exactly as the attribute won. */
.u-p-44-0-0{padding:44px 0 0;}
.u-mt-14{margin-top:14px;}
.u-p-36-0-20{padding:36px 0 20px;}
.u-m-10-0-28{margin:10px 0 28px;}
.u-pt-8{padding-top:8px;}
.u-m-8-0-36{margin:8px 0 36px;}
.u-w-20pc{width:20%;}
.u-w-46pc{width:46%;}
.u-w-34pc{width:34%;}
.u-w-30pc{width:30%;}
.u-w-70pc{width:70%;}
.u-w-16pc{width:16%;}
.u-w-24pc{width:24%;}
.u-w-18pc{width:18%;}
.u-w-48pc{width:48%;}
.u-m-50-0-30{margin:50px 0 30px;}
.u-bb-none{border-bottom:none;}
.u-mb-14{margin-bottom:14px;}
.u-mt-40{margin-top:40px;}
.u-ta-center-mt-24{text-align:center;margin-top:24px;}