a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  box-shadow: none;
  outline: #000 dotted 2px;
  outline-offset: 0.05em;
}

:root {
--max-width-wrap-desk-targ:623px;
}
/* :root {
interpolate-size:allow-keywords;
--max-width-wrap-desk-targ:623px;
--max-width-wrapper-phone:375px;
--body-copy-max-width:66ch;
--marbot-phon: 1.4em;
--marlft-phon: 0;
--marlft-desk: 1.4em;
--imgbig-width-phon: clamp(50%, 85%, 100%);
--btncolor: #355FF6;
--nlnkcolor1:oklch(49% 0.0957 278.63deg);
--nlnkcolor2: #55e;
--background-color: #fffefd;
--fontserif: Merriweather, Palatino, "Palatino Linotype", Georgia, serif;
--fontsansserif: 'Lato', "Segoe UI", -apple-system, blinkmacsystemfont, Roboto, oxygen-sans, ubuntu, cantarell, "Helvetica Neue", sans-serif;
--fontmonospace: "Courier New", "Lucida Console", "Andale Mono", "Dejavu Sans Mono", "Bitstream Vera Sans Mono", monaco, consolas, monospace;
} */

@font-face {
  font-display: swap;
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('https://keithpurtell.com/fonts/lato-regular-webfont.woff2') format('woff2'),
       url('https://keithpurtell.com/fonts/lato-regular-webfont.woff') format('woff');
}

@font-face {
font-display: swap;
font-family: 'Lato';
font-style: normal;
font-weight: 800;
src: url('https://keithpurtell.com/fonts/lato-black.woff2') format('woff2'),
    url('https://keithpurtell.com/fonts/lato-black.woff') format('woff');
}

/* GENERAL CSS NO MEDIA QUERIES =============== GENERAL CSS NO MEDIA QUERIES =================== */

#main h1,#main h2,#main h3,#main h4,#main h5 {
 font-family:var(--fontsansserif);
}
#main,#main blockquote,#main img,#main ol,#main p,#main ul,
figure,header,pre {
margin-bottom: clamp(1.5em, var(--marbot-phon), 2em);
}

li > pre,pre {
overflow-wrap: anywhere;
white-space: pre-wrap;
}

#content1 {
font-family: "Lato Black", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
font-weight: 900;
}

/* KICKER REPLACES DECK */
#main>.heading-group {
display:flex;
flex-direction:column;
margin-bottom:.5em;
margin-left:0;
}
.heading-group h4 {
margin-top:0;
}
.kicker {
color: #777;
font-size:1.1em;
font-weight: 600;
letter-spacing: 0.1em;
margin-bottom: 0.25rem; /* Adds a little space between the kicker and the main heading */
margin-left:0;
text-transform: uppercase;
}

figcaption,tbody,tbody tr,thead,thead tr {
width: 100%;
}
table td,table th,tbody,td,thead {
border: 1px solid #aaa;
box-sizing: border-box;
}

li > pre {
font-weight: 800;
}
#page > header > h1,
#page > header > h2 {
font-family: "Roboto Slab", serif;
}

.irs,
.irs > *,
figcaption {
position: relative;
}

.contain_header,
.irs {
background-repeat: no-repeat;
}
img.responsive {
height: auto;
max-width: 100% !important;
}
article,
pre,
section {
line-height: inherit;
}

#main details summary,
button.button {
cursor: pointer;
}
#main details summary,
li > pre {
display: inline;
}

/* html
.flow > * + * {
margin-block-start: var(--flow-space, 1em);
margin-top: var(--flow-space);
}
.flow {
--flow-space: 1em;
} */

#main section.emph_border {
background-color:rgb(250 250 250 / 85%);
border:4px solid #ccc;
border-radius:6px;
font-size:1rem;
margin-bottom:1.5em;
padding:1.75rem 5% 1rem;
position: relative; /* Enable positioning of the overlaid text */
}
#main section.emph_border ul,#main section.emph_border h2,#main section.emph_border h3 {
margin:.5em 0;
}
#main section.emph_border::after {
background-color: #fefefe;
border: 2px solid #ccc;
border-radius: 6px;
content: attr(data-overlay);
font-family: geometric, sans-serif;
font-size:1em;
left: 50%;
padding: 3px 6px;
position: absolute;
text-align: center;
text-transform: uppercase;
top: -22px;
transform: translateX(-50%);
/* width: 20em; */
white-space: nowrap;
}
.targeted h1 {
  font-size: clamp(2.25rem, 6vw, 3.2rem);
  font-weight: 900;
  line-height:.9;
  margin-bottom: 1.5rem; /* Space below the heading */
}
.targeted h2 {
/* Scales from 2rem (32px) to 4rem (64px),
   * with a fluid size based on 5.5vw in between. */
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  font-weight: 800;
  line-height:.9;
  margin-bottom: 1.25rem;
}
.targeted h3 {
/* Scales from 1.75rem (28px) to 3rem (48px),
   * with a fluid size based on 4vw in between. */
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 700;
  line-height:1.0;
  margin-bottom: 1rem;
}
.targeted h4 {
/* Scales from 1.5rem (24px) to 2.25rem (36px),
   * with a fluid size based on 3vw in between. */
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 600;
  line-height:1.1;
  margin-bottom: 0.75rem;
}
.targeted h5 {
/* Scales from 1.25rem (20px) to 1.75rem (28px),
   * with a fluid size based on 2.5vw in between. */
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 500;
  line-height:1.2;
  margin-bottom: 0.5rem;
}

.targeted #main .targ-explain {
/* much borrowed from author bio */
    --bio-bg: #f6f6f5;
    --bio-bg-active: #ffffff;
    --bio-border: #9a9a9a;
    --bio-border-active: #111111;
    --bio-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
    --bio-radius: 10px;

    box-sizing: border-box;
    max-width: 30rem;
    margin: 3.5rem auto 0 0;
    padding: 1rem;
    background-color: var(--bio-bg);
    border: 2px solid var(--bio-border);
    border-radius: var(--bio-radius);
    transition: background-color 0.18s ease,
                border-color 0.18s ease;
}
/* Desktop / mouse: react to hover.
     (pointer: fine) check keeps this scoped to mouse-driven devices so it doesn't fight with the tap behavior below on hybrid touch laptops. */
  @media (hover: hover) and (pointer: fine) {
    .targeted #main .targ-explain:hover {
      background-color: var(--bio-bg-active);
      border-color: var(--bio-border-active);
      box-shadow: var(--bio-shadow);
    }
  }

/* Touch - mobile. */
  .targeted #main .targ-explain:active {
    background-color: var(--bio-bg-active);
    border-color: var(--bio-border-active);
    box-shadow: var(--bio-shadow);
  }

/* If you later add a link or button inside the box (e.g. a link
     to a full profile page), this keeps keyboard focus in sync
     with the same visual state. Harmless to leave in even if
     there's nothing focusable inside. */
  .targeted #main .targ-explain:focus-within {
    background-color: var(--bio-bg-active);
    border-color: var(--bio-border-active);
  }


/* === pro advice box start =============================================================== */

/* === opinion box end === */

/* ================================================================================ */

/* ================================= PHONES start ========================================= */
.lft,.rgt {
max-width: 100%;
}

body > div.agr-grid-heykr {
align-items: start;
display: grid;
gap: 0 16px;
-ms-grid-rows: 1fr;
grid-template-areas: "ColOne_Head ColOne_Head" "ColTwo_Body ColTwo_Body";
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 1fr;
height: auto;
margin: 0;
min-width: 324px;
overflow: clip;
padding: 0;
width: 98%;
}

td,
th {
border: 1px solid #aaa;
}

table {
border-collapse: collapse;
display: table;
max-width: 98%;
}

.lft,.rgt,
article,
section {
padding: 0;
}
#main iframe,#main img {
margin-bottom: var(--marbot-phon);
}
#main ol,#main ul {
margin-left: 1rem;
}
article,
section {
border: 0;
line-height: inherit;
margin: 0;
width: auto;
}
#main details,
#main details {
margin: 0 0.7rem var(--marbot-phon) 1rem;
padding: 0 1.3em 0 0.7em;
width: clamp(320px, 600px, 610px);
width: 95%;
}

/* Policy: The middle (preferred) value within a CSS clamp() function must be defined using a flexible unit (e.g., rem, vw, %) to maintain responsiveness. Fixed units (e.g., px) are prohibited for this value." */

#main details {
background: 0 0;

margin-top: 5px;
max-width: 70ch;
}

#main details summary {
cursor: pointer;
}
#main details summary {
display: inline;
}
#main details summary:hover {
background-color: #efefef;
}
#main details summary:active {
background-color: #cedfff;
}
#main summary {
background: 0 0;
display: list-item;
max-width: 91vw;
padding: 0.25em;
text-decoration: underline;
width: clamp(320px, 100%, 610px);
}
#main details .content_acc figcaption {
display: block;
hyphens: auto;
width: 100%;
}
#main summary::before {
content: "";
display: list-item;
left: 1em;
position: absolute;
top: 0.65em;
transform: rotate(0);
transform-origin: 0.2em 50%;
transition: transform 0.25s;
transition-behavior: allow-discrete;
}
#main details[open] > summary::before {
transform: rotate(90deg);
transition: transform 0.25s;
transition-behavior: allow-discrete;
}
#main details[open] summary {
text-decoration: none;
}
#main details > summary::-webkit-details-marker,
#main details > summary::before,
#main details > summary::marker {
text-decoration: none;
}
details[open] {
--bg: rgb(0 0 0 / 20%);

background: var(--bg);
border: 0.5rem solid var(--bg);

margin: 0 0 2rem 2em;
}
#main details summary .content_acc {
border-top: none;
padding: 0 10px 10px;
}
#main:focus-visible {
outline: 0;
}
#main .back-to-top-wrapper {
height: 95%;
top: 150vh;
}
.rgt {
float: right;
margin: 0.2em 0 0 0.8em;
}
.lft {
float: left;
margin: 0.2em 0.8em 0 0;
}
article td + h3 {
margin-top: 0;
}
.item-1 {
font-family: sans-serif;
}
div.towering {
max-width: 78%;
}
pre {
font-size: 0.85em;
width: 95% !important;
}
.ital {
font-style: italic;
}
#main .justred {
color: #c00;
}
th {
background: #333;
color: #fefefe;
display: table-cell;
font-weight: 700;
}
tr {
display: table-row;
}
blockquote {
max-width: 60ch;
}
blockquote:has('"') {
font-style: italic;
}
tr:nth-of-type(odd) {
background: #eee;
}

article > #main.content {
flex: 1 0 auto;
padding: 20px;
}
#main p.info {
border: 4px solid #000;

hyphens: auto;
line-height: 1em;
margin: auto auto 1.75em 15%;
padding: 0.3em 0.1em 0.3em 0.4em;
width: clamp(33%, 33%, 90%);
}

@media only screen and (width <= 767px) {/* phones */
#main section.emph_border {
width:100%;
}
.backhome {
background-color: #0055bd;
border-radius: 3px;
margin:0;
padding-bottom: 0.6em;
padding-top: 0.2em;
width:100%;
}

#main.content ul, #main.content ol {
margin:0 auto 1.5em;
padding-inline-start:1em;
padding-left:.25em;
width:100%;
}
#main.content .socemptrn {
list-style-type: none;
}
#main.content ul.bking, #main.content ol.bking {
margin:0 auto 1.5em;
padding-inline-start:1em;
width:100%;
}

body > div.agr-grid-heykr {
align-items: start;
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 1fr;
height: auto;
margin: 0;
min-width: 324px;
overflow: clip;
padding: 0;
width: 98%;
}
article,
pre,
section {
line-height: inherit;
}
#page > article > table:nth-child(5) > thead > tr > th:nth-child(2) {
text-align: center;
}
.contain_header,
td,
th {
text-align: left;
}

header#top {
margin-bottom: .9rem;
position: relative;
}

.ital {
font-style: italic;
}

/* body removed 9-15-25 */
article#main {
flex: 1 0 auto;
}

#main summary,#main table,
.lft,.rgt {
max-width: 100%;
}
#main .back-to-top-wrapper {
bottom: -30em;
height: 96%;
top: 350vh;
}
footer div.copyright {
color: #333;
font-size: 0.85em;
margin: 0 auto;
}
article,
section {
border: 0;
margin: 0;
padding: 0;
width: auto;
}

strong,
td,
th {
border: none;
}
#main {
width: 100%;
}
#main:focus-visible {
outline: 0;
}
#main p {
max-width: 92vw;
overflow-wrap:normal;
}
#main details,
#main details {
margin: 0 0.7rem var(--marbot-phon) 0;
width: 96%;
}
#main table,
picture {
margin-left: 0;
}
#main table {
margin-bottom: var(--marbot-phon);
margin-right: 0.15em;
min-width: 96%;
}
#main div p, #main td p {
max-width:97%;
width:100%;
}
ol,ul {
margin: 1em 0 var(--marbot-phon) 1.5em;
max-width:98%;
padding: 0 0 0 0.2em;
}

pre {
font-size: 0.85em;
margin-bottom: var(--marbot-phon);
margin-left: 1em;
overflow-wrap: anywhere;
white-space: pre-wrap;
}
.rgt {
float: right;
margin: 0.2em 0 0 0.8em;
padding: 0;
}
.lft {
float: left;
margin: 0.2em 0.8em 0 0;
padding: 0;
}
picture > img {
margin: 0;
max-width: 300px;
padding: 0;
}

/* =========================== 4-24-2025 ================================= */
figure, img {
    box-sizing:border-box;
    display:block;
    float:none;
    height:auto;
    margin:1rem auto;
    max-width:100%; /* Ensures images don't exceed their container */
    padding:0;
    width:calc(100% - 2rem);
}

/* Optional: Add some styles specifically for figures to handle captions */
figcaption {
float:none;
font-size:1rem;
font-style: italic;
line-height:1.2em;
padding: 0.5rem 0;
text-align: center;
}

/* Optional: Prevent very large images from stretching beyond their intrinsic size */
img {
    max-height: 100vh; /* Prevents images from being taller than viewport */
    max-width: 100%;
}

blockquote,table {
display: block;
}

p,pre {
width: 93%;
}

.agr-grid-heykr,
body > div.agr-grid-heykr {
display: grid;
gap: 0;
grid-template-areas: "ColOne_Head" "ColOne_Body" "ColTwo_Head" "ColTwo_Body";
}
.agr-grid-heykr {
display: grid;
grid-auto-rows: minmax(min-content, max-content);
-ms-grid-columns: 1fr 1fr;
-ms-grid-rows: 1fr 1fr;
grid-template-columns: repeat(2, 1fr);
height: 100%;
width: 100%;
}
.agr-grid-heykr div {
border: 1px solid #333;

padding: 0.5em;
}
.item-1 {
font-family: sans-serif;
max-width: 100%;
min-width: 0;
overflow: clip;
}
.hbr {
hyphens: manual;
}
.agr-grid-heykr > div:first-child {
grid-area: ColOne_Head;
height: auto;
order: 1;
width: 100%;
}
.agr-grid-heykr > div:nth-child(3) {
background-color: #efefef;
grid-area: ColOne_Body;
height: auto;
margin: 0 auto 1em;
order: 2;
overflow: clip;
width: 100%;
}
.agr-grid-heykr > div:nth-child(2) {
grid-area: ColTwo_Head;
height: auto;
order: 3;
width: 100%;
}
.agr-grid-heykr > div:nth-child(4) {
background-color: #efefef;
grid-area: ColTwo_Body;
height: auto;
margin: 0 auto 1em;
order: 4;
overflow: clip;
width: 100%;
}
.agr-grid-heykr div.item-1,
.agr-grid-heykr div.item-2 {
background-color: #000;
border: 1px solid #333;
color: #eee;
font-family: sans-serif;
font-weight: 700;
min-width: 330px;
padding: 0.5em;
width: 100%;
}
body > div.agr-grid-heykr > div.item-1 {
order: 1;
}
body > div.agr-grid-heykr > div.item-3 {
border: 1px solid #333;

justify-content: center;
order: 2;
}
body > div.agr-grid-heykr > div.item-2 {
order: 3;
}
body > div.agr-grid-heykr > div.item-4 {
border: 1px solid #333;

justify-content: center;
order: 4;
}
.agr-grid-heykr .responsive {
height: auto;
max-width: 99%;
min-width: 300px;
}
thead {
display: table-header-group;
min-width: 150px;
}
td,
th,
tr {
display: block !important;
}
tbody,
thead {
float: left;
width: 100%;
}
tr:nth-of-type(odd) {
background: #eee;
}

th {
background: #333;
color: #efefef;
font-weight: 700;
}

td,
th {
padding: 0.275em 0.265em 0.275em 0.295em;
}
blockquote {
margin-block: 1em;
margin-inline: 13px;
}
blockquote:has('"') {
font-style: italic;
}
#main .justred {
color: #c00;
}
li {
hyphens: manual;
}
body > h1,body > h2,body > h3,body > h4,body > li {
hyphens: manual;
margin-top: 0.9em;
max-width: 100%;
max-width: 70ch;
}
.clearfix::after {
clear: both;
content: "";
display: table;
}
article > h2 + h3,
article > h3 + h4,
article > h4 + h5 {
margin-bottom: 1em;
margin-top: 0;
}
h1,
h2,
h3,
h4 {
margin-bottom: 1em;
}

/* ==== NEW BELOW NEW BELOW NEW NEW NEW NEW ==== */

/* body.targeted wrapper, MAIN and page base layout css ONLY */
body.targeted .wrapper {
margin: 0 auto;
max-width:var(--max-width-wrapper-phone);
overflow:hidden;
padding-left: 1em;
padding-right: 1em;
width: 100%;
}
body.targeted #main {
background-color: transparent;
margin: 2em auto 0; /* */
padding: 0;
width:100%;
}
#main.content .insertnote-contain {
background-color: #FFF;
border: 8px dashed #DDD;
box-sizing:border-box;
color: #111;
height: auto;
margin:0 auto 1.5em;
max-width: 97%;
overflow: clip auto;
padding:0.7em;
} /* also line 15132 */

/* CLAUDE FOLLOWS 12-30-2025 */
body {
  margin: 0;
  padding: 0;
}
#main.content {
  
  margin: 0 auto;
  max-width: 100%;
}
}/* end phones */


/* ===========================DESKTOP START==================================== */

@media only screen and (width >= 768px) /* DESKTOP */ {
body.targeted > div.wrapper {
margin: 0 auto;
max-width:var(--max-width-wrap-desk-targ);
min-height:100vh;
overflow:visible;
padding:1rem 0 0;
/*width: 100%;*/
}

#main section.emph_border {
width:90%;
}
article, body:not(.page-id-targeted) footer, header {
  flex-shrink: 0;
}

/* body removed 9-15-25 */
.irs,#main div p,#main p,#main td p {
max-width: 70ch;
}
.irs,#main div p,header,ol,#main p,table,#main td p {
max-width: 100%;
}

body:not(.page-id-targeted) > ol,
body:not(.page-id-targeted) > ul {
margin: 1em 0.5em var(--marbot-phon) 1.6em;
padding: 0 0.5em 0 0.3em;
max-width: 66ch;
}

.img_no_hov {
margin-bottom:0.7em;
}

pre {
margin-left: 1em;
white-space: pre-wrap;
}

li > pre {
font-family: monospace;
font-size: 0.9em;
margin: 1em 0;
white-space: pre-wrap;
}
.ital {
font-style: italic;
}
.normal {
font-style: normal;
}

.websource,
figcaption {
font-style: italic;
}
.justblue {
color: #00d;
}
#main .justred,
p.info strong {
color: #c00;
}

/* h1,h2,h3,h4 {
-ms-hyphens: manual;
-webkit-hyphens: manual;
hyphens: manual;
} */
figcaption {
font-size:0.9rem;
hyphens:auto;
line-height:1.2em;
max-width:100%;
text-align:center;
}
table {
border-collapse: collapse;
-moz-column-break-inside: auto;
     break-inside: auto;
display: table;
}
tr {
-moz-column-break-after: auto;
     break-after: auto;
-moz-column-break-inside: avoid;
     break-inside: avoid;
display: table-row;
}
span,
strong,
table,
td,
th {
font-size: inherit;
}
table td,
table th {
padding: 0.375em 0.365em 0.375em 0.395em;
text-align: left;
}
table tr td:first-child {
font-family: sans-serif;
font-weight: 500;
padding: 0.8em;
vertical-align: top;
}

.irs::after {
background-color: rgb(255 255 255 / 30%);
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}

article {
font-family: sans-serif;
margin: 0 0 1em;
padding: 0;
width: 99%;
}
header {
background-color: transparent;
position: relative;
width:var(--max-width-wrap-desk-targ);
}

#top > .ital.plusdate {
border:3px solid #888;

color: #888;
font-weight:500;
margin: 0 0 0.4rem;
max-width: 1080px;
padding:.1rem;
}
#main #top > p.datetime {
font-family: "Courier New", monospace;
font-size: 0.85em;
font-weight: 700;
margin-bottom: 0.1em;
margin-left:.5em;
margin-top:0.03em;
}

/* .strike_thru {
text-decoration:line-through;
text-decoration-thickness:1px;
} */
#main details[open] summary,
.back-to-top-link,
a.button {
text-decoration: none;
}
.irs {
background-image: url("../techjobfiles/IRS-logo.webp");
background-size: contain;
}
.irs > {
z-index: 10;
}
#main {
background-color: transparent;
display: block;
margin: inherit;
max-width:44rem;
min-height: 100vh;
min-width:300px ;
padding:0;
position: relative;
width:100%;
}
.back-to-top-link {
background-color: rgb(30 30 30 / 20%);
border: 1px solid rgb(37 69 104 / 60%);
border-radius: 50%;

color: #fefefe;
display: inline-block;
font-size: 2em;
font-weight: 700;
height: 3rem;
line-height: 2.1rem;
padding: 0.25rem;
pointer-events: all;
position: sticky;
top: calc(100vh - 5rem);
transition: transform 0.2s ease-in;
transition-behavior: allow-discrete;
width: 3rem;
}
#main details,
#main details {
margin: 0 0.7rem var(--marbot-phon) 2rem;
width: clamp(320px, 600px, 610px);
}
#main details {
background: 0 0;
margin-top: 5px;
max-width: 70ch;
width: clamp(300px, 100%, 600px);
}
#main details summary:hover {
background-color: #efefef;
}
#main details summary:active {
background-color: #cedfff;
}
#main summary {
background: 0 0;
display: list-item;
max-width: 91vw;
padding: 0.25em;
text-decoration: underline;
width: clamp(320px, 100%, 610px);
}
#main details .content_acc figcaption {
display: block;
hyphens: auto;
width: 100%;
}
#main summary::before {
content: "";
display: list-item;
left: 1em;
position: absolute;
top: 0.65em;
transform: rotate(0);
transform-origin: 0.2em 50%;
transition: transform 0.25s;
transition-behavior: allow-discrete;
}
#main details[open] > summary::before {
transform: rotate(90deg);
transition: transform 0.25s;
transition-behavior: allow-discrete;
}
#main details > summary::-webkit-details-marker,
#main details > summary::before,
#main details > summary::marker {
text-decoration: none;
}
details[open] {
--bg: rgb(0 0 0 / 20%);

background: var(--bg);
border: 0.5rem solid var(--bg);

margin: 0 0 2rem 2em;
}
#main details summary .content_acc {
border-top: none;
padding: 0 10px 10px;
}
.contain_header #content1 > h2 {
line-height:1.4;
}
img.responsive {
max-width: 100% !important;
}
#main details > div > figure > iframe {
aspect-ratio: 4/5;
display: block;
width: 100%;
}
article,
section {
border: 0;
line-height: inherit;
margin: 0;
padding: 0;
width: auto;
}
#pagetop a,
button.button {
background-color: transparent;
}
#main:last-child {
margin-bottom: 0;
}

img {
max-width: 100%;
}
#pagetop a,
.back-to-top-link,
.backhome,
.websource {
text-align: center;
}
#main iframe, #main img {
    margin-bottom: var(--marbot-phon);
}
#main, 
#main blockquote, 
#main img, 
#main ol, 
#main p, 
#main ul, 
figure, 
header, 
pre {
margin-bottom: .7em;
}
header#top {
margin-bottom: .9em;
position: relative;
}

body.targeted #main figure:first-of-type {
padding-top:.5em;
} 

#main.content .insertnote-contain {
align-items: center;
background-color: #FFF;
border: 8px dashed #DDD;
box-sizing:border-box;
color: #111;
height: auto;
margin: 0 auto 1.5em;
max-width: 41rem;
overflow: clip auto;
padding:1em;
} /* also line 953 */

.visible-on-focus {
height: 1px;
left: -10000px;
position: absolute;
top: auto;
width: 1px;
}
.visible-on-focus:active,
.visible-on-focus:focus {
border: none;
box-shadow: 0 0 3px 3px #007bff;
color: #00f;
font-family: sans-serif;
font-size: 1.5em;
font-weight: 600;
height: auto;
left: auto;
line-height: inherit;
outline: transparent dotted 3px;
position: relative;
width: auto;
}

button.button {
border: none;
font-family: inherit;
}
a.button,
button.button {
align-items: center;
align-self: start;
background-color: var(--btncolor);
border-radius: 8px;
box-shadow: 0 3px 5px rgb(0 0 0 / 18%);
color: #fefefe;
display: inline-flex;
font-size: 1.2rem;
justify-content: center;
line-height: 1.1;
min-height: 44px;
min-width: 10ch;
padding: 0.25em 0.75em;
text-align: center;
transition: 220ms ease-in-out;
transition-behavior: allow-discrete;
}
a.button:active,
a.button:hover,
button.button:active,
button.button:hover {
background-color: #dc0033;
}
a.button:focus,
button.button:focus {
box-shadow: 0 0 0 4px #0029be;
outline-color: transparent;
outline-style: solid;
}
.bolder700 {
font-weight:700;
}
#main .websource {
border: 1px solid #aaa;
border-top: none;

color:#767676;
font-weight:400;
margin-top: -0.7em;
padding: 0.4em;
}
.backhome,
.backhome a:active,
.backhome a:hover {
color: #efefef;
}
.up {
font-size: 2em;
}
#main #pagetop {
margin:3rem auto 4rem;
}
#pagetop a {
color: #960;
display: block;
font-size: 1rem;
font-weight: 100;
padding: 1em;
width: 12em;
}
#pagetop a:active,
#pagetop a:hover {
background-color: rgb(190 226 255 / 70%);
color: rgb(107 179 252);
}
.backhome {
background-color: #0055bd;
border-radius: 3px;
margin: 0.4em auto 1.1em;
padding-bottom: 0.6em;
padding-top: 0.2em;
width: 96%;
}

.backhome a:link,
.backhome a:visited {
color: #efefef;
font-family: sans-serif;
font-weight: 700;
margin: 0;
padding: 0;
width: 100%;
}
.backhome a::before {
display: none;
}

#main .back-to-top-wrapper {
bottom:385px;
display: block;
padding-bottom: 0.4em;
pointer-events: none;
position: fixed;
right:50px;
transition:transform 0.2s ease-in;
}
.back-to-top-link:focus,
.back-to-top-link:hover {
background-color: rgb(30 30 30 / 70%);
border: 1px solid rgb(37 69 104 / 90%);

transform: scale(1.1);
transition: transform 0.2s ease-in;
transition-behavior: allow-discrete;
}
.back-to-top-link:focus {
box-shadow: 0 0 0 3px #4e85c0;
outline: 0;
}
picture {
margin-bottom: 1.1em;
margin-left: 1rem;
}

/* img[width] {
width: auto;
} this causing img to be way oversize */
img[width][height] {
height: auto;
}
.balanced,
blockquote,dd,dt {
text-wrap:wrap;
}
.balanced {
text-wrap: pretty;
white-space: unset;
}

#main p {
max-width: 70ch;
overflow-wrap:normal;
width: 100%;
}

th {
background: #333;
color: #fefefe;
display: table-cell;
font-weight: 700;
}

/* #main iframe,
#main img {
margin-bottom: var(--marbot-phon);
margin-left: 1rem;
} conflicting with Paul Irish youtube video loader */

#main ol,
#main ul {
margin-left: 1rem;
}

#main table {
margin-bottom: var(--marbot-phon);
margin-left: 1em;
margin-right: auto;
max-width: 100%;
min-width: 90%;
}

picture > img {
margin: 0;
max-width: 668px;
padding: 0;
}
.lft,.rgt,table {
max-width: 100%;
}
td,
th {
border: 1px solid #aaa;

padding: 0.375em;
}
table,
td,
th {
font-size: inherit;
}
#main div p,
#main td p {
max-width: 66ch;
}
.rgt {
float: right;
margin: 0.2em 0 0 0.8em;
padding: 0;
width: auto;
}
.lft {
float: left;
margin:.2em .8em 0 0;
padding: 0;
width: auto;
}
blockquote {
max-width: 65ch;
/*width: 75%;*/
}
blockquote:has('"') {
font-style: italic;
}
tr:nth-of-type(odd) {
background: #eee;
}
.agr-grid-heykr {
align-items: start;
display: grid;
gap: 0 16px;
grid-template-areas: "ColOne_Head ColTwo_Head" "ColOne_Body ColTwo_Body";
grid-template-columns: repeat(2, 1fr);
height: auto;
margin-bottom: 2em;
max-width: 780px;
min-width: 350px;
}
.agr-grid-heykr div.item-1,
.agr-grid-heykr div.item-2 {
background-color: #000;
border: 1px solid #333;

color: #eee;
font-family: sans-serif;
font-weight: 700;
min-width: 330px;
padding: 0.5em;
width: auto;
}
.agr-grid-heykr div.item-3,
.agr-grid-heykr div.item-4 {
background-color: #efefef;
border: 1px solid #333;

width: auto;
}
.agr-grid-heykr .item-1 {
grid-area: ColOne_Head;
}
.agr-grid-heykr .item-2 {
grid-area: ColTwo_Head;
}
.agr-grid-heykr .item-3 {
grid-area: ColOne_Body;
}
.agr-grid-heykr .item-4 {
grid-area: ColTwo_Body;
}
#main p.preformatted {
overflow-wrap:normal;
padding:1em;
width: 100%;
}
#main:focus-visible {
outline: 0;
}
article > #main.content {
flex: 1 0 auto;
padding: 20px;
}
footer div.copyright {
line-height: inherit;
margin: 0 auto;
padding: 0;
position: inherit;
text-align: center;
width: 100%;
}
} /* END DESKTOP */

@media only screen and (min-width: 768px) and screen and (-ms-high-contrast: active) {
button.button {
border: 2px solid currentcolor;

}
}