/* Reindeer CMS 1.6.2: all card surfaces are exactly a 95% page-background / 5% tint mix. */
/* Light palettes tint toward black; dark palettes tint toward white. */
:root{
  --card:color-mix(in srgb,var(--bg) 95%,var(--card-tint) 5%);
}
:root,html[data-theme="plain"]{--bg:#ffffff;--text:#111111;--muted:#555555;--line:#b7b7b7;--accent:#111111;--hover:#f2f2f2;--card-tint:#000000;--footer-contrast:#000000;--button-text:#ffffff}
html[data-theme="light"]{--bg:#ffffff;--text:#111111;--muted:#555555;--line:#b7b7b7;--accent:#111111;--hover:#f2f2f2;--card-tint:#000000;--footer-contrast:#000000;--button-text:#ffffff}
html[data-theme="dark"]{--bg:#000000;--text:#ffffff;--muted:#bcbcbc;--line:#515151;--accent:#ffffff;--hover:#181818;--card-tint:#ffffff;--footer-contrast:#ffffff;--button-text:#000000}
html[data-theme="programmer"]{--bg:#111a22;--text:#e6f2ff;--muted:#a3b8cc;--line:#405568;--accent:#79c1ff;--hover:#243343;--card-tint:#ffffff;--footer-contrast:#ffffff;--button-text:#0c1e30}
html[data-theme="nerd"]{--bg:#f3f0fc;--text:#282044;--muted:#655c80;--line:#bdb0d5;--accent:#49348c;--hover:#eee8fb;--card-tint:#000000;--footer-contrast:#000000;--button-text:#ffffff}
html[data-theme="hacker"]{--bg:#071108;--text:#c6f7cd;--muted:#9abc9e;--line:#355d3b;--accent:#79f38a;--hover:#17321a;--card-tint:#ffffff;--footer-contrast:#ffffff;--button-text:#041808}
html[data-theme="cracker"]{--bg:#190b1a;--text:#ffecfb;--muted:#d2afd0;--line:#764978;--accent:#ff94eb;--hover:#3b1e40;--card-tint:#ffffff;--footer-contrast:#ffffff;--button-text:#270928}
html[data-theme="noob"]{--bg:#ecfaef;--text:#163021;--muted:#547162;--line:#a0c9ad;--accent:#14663c;--hover:#def3e4;--card-tint:#000000;--footer-contrast:#000000;--button-text:#ffffff}
html[data-theme="slate"]{--bg:#edf1f5;--text:#213044;--muted:#607083;--line:#d4dee8;--accent:#345f85;--hover:#f3f6f9;--card-tint:#000000;--footer-contrast:#000000;--button-text:#ffffff}
html[data-theme="sand"]{--bg:#f7f3ea;--text:#3f3528;--muted:#766d5f;--line:#e8decf;--accent:#765634;--hover:#f8f1e7;--card-tint:#000000;--footer-contrast:#000000;--button-text:#ffffff}
html[data-theme="blueprint"]{--bg:#132941;--text:#eef7ff;--muted:#bacfe1;--line:#40617c;--accent:#95d9ff;--hover:#20415f;--card-tint:#ffffff;--footer-contrast:#ffffff;--button-text:#0d2434}
html[data-theme="fiber"]{--bg:#071720;--text:#e1fafd;--muted:#a5cbd0;--line:#31616c;--accent:#68e3e8;--hover:#143039;--card-tint:#ffffff;--footer-contrast:#ffffff;--button-text:#06272b}
html[data-theme="carbon"]{--bg:#15191c;--text:#f1f4f6;--muted:#b8c0c7;--line:#58636b;--accent:#e0e7ed;--hover:#2c3236;--card-tint:#ffffff;--footer-contrast:#ffffff;--button-text:#181b1e}
html[data-theme="amber"]{--bg:#1d170b;--text:#fff3d5;--muted:#d9c99a;--line:#846a35;--accent:#ffd26b;--hover:#362a15;--card-tint:#ffffff;--footer-contrast:#ffffff;--button-text:#392600}
html[data-theme="dark-blue"]{--bg:#091729;--text:#e7f1ff;--muted:#abc1de;--line:#425f81;--accent:#9fcbff;--hover:#1c304b;--card-tint:#ffffff;--footer-contrast:#ffffff;--button-text:#0a263e}
html[data-theme="dark-green"]{--bg:#0b2118;--text:#e0f9e9;--muted:#a8d0ba;--line:#416c59;--accent:#80e3af;--hover:#1b3c2a;--card-tint:#ffffff;--footer-contrast:#ffffff;--button-text:#0c2d1d}
html[data-theme="dark-red"]{--bg:#281116;--text:#ffeced;--muted:#dfb5bf;--line:#86505a;--accent:#ffa4a9;--hover:#401f28;--card-tint:#ffffff;--footer-contrast:#ffffff;--button-text:#3a101a}
html[data-theme="dark-purple"]{--bg:#1e152c;--text:#f4eefe;--muted:#c9b7df;--line:#685581;--accent:#c9a7ff;--hover:#342647;--card-tint:#ffffff;--footer-contrast:#ffffff;--button-text:#2a1344}
html[data-theme="dark-teal"]{--bg:#0a2325;--text:#e6fbfc;--muted:#afd0d0;--line:#426f73;--accent:#86e4df;--hover:#1a3b3f;--card-tint:#ffffff;--footer-contrast:#ffffff;--button-text:#06373c}
html[data-theme="dark-gray"]{--bg:#1c1e21;--text:#f2f3f5;--muted:#bfc3ca;--line:#656a71;--accent:#d6dbe1;--hover:#30343a;--card-tint:#ffffff;--footer-contrast:#ffffff;--button-text:#1b2025}
/* Roboto throughout all themes; Arial/Helvetica are web-safe fallbacks.
   If Google Fonts cannot load, the design remains readable. */
:root {
  --font-heading: "Roboto", Arial, Helvetica, sans-serif;
  --font-body: "Roboto", Arial, Helvetica, sans-serif;
}
/* Use theme text color to make every card border visible regardless of palette. */
:root{--card-pad:14px;--card-gap:10px;--control-py:8px;--control-px:10px;--card-border:color-mix(in srgb,var(--card) 60%,var(--text) 40%)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:2%;background:var(--bg);color:var(--text);font:14px/1.55 var(--font-body)}
.wrap{width:100%;max-width:625px;margin:0 auto;padding:0}
/* Headings and content both use Roboto, with the same web-safe fallback stack. */
h1,h2,h3,h4,
.section-details>summary,.item>summary,.item-title,
.profile-link,.back-link,.profile-table caption {
  font-family:var(--font-heading);
}
h1,h2,h3,p{margin-top:0}
h1{font-size:1.65rem;line-height:1.2;margin-bottom:4px;letter-spacing:-.02em}
h2{font-size:1.2rem;line-height:1.35;margin-bottom:10px}
h3{font-size:1.05rem;line-height:1.4;margin-bottom:6px}
p{margin-bottom:var(--card-gap)}
a{color:var(--accent)}
a:hover{text-decoration-thickness:1px}
.card{background:var(--card);border:1px solid var(--card-border);border-radius:0;margin:0 0 var(--card-gap);padding:var(--card-pad);overflow:hidden}
.intro.card{padding:var(--card-pad);margin-bottom:var(--card-gap)}
.subtitle{color:var(--muted);font-size:.88rem;margin:0}
/* Compact job title above the person's name; location remains on Profile only. */
.intro.card h1{margin:5px 0 0}
.header-meta{font-size:.88rem;line-height:1.4}
.header-meta>.subtitle{overflow-wrap:anywhere;text-align:left}
.card-grid{display:flex;flex-direction:column;gap:var(--card-gap);margin:0}
.card-grid>.card{width:100%;margin:0;padding:0 var(--card-pad);min-width:0}
.section-details>summary{cursor:pointer;list-style:none;padding:12px 0;font-size:1rem;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:12px}
.section-details>summary::-webkit-details-marker,.item>summary::-webkit-details-marker,.more-items>summary::-webkit-details-marker{display:none}
.section-details>summary::after,.item>summary::after{content:'▼';font-size:.8rem;color:var(--muted);font-weight:400;flex-shrink:0}
.section-details[open]>summary::after,.item[open]>summary::after{content:'▲'}
.section-details[open]>summary{margin-bottom:6px}
.section-content{padding-bottom:12px}
.section-content>*:first-child{margin-top:0}
.section-content>*:last-child{margin-bottom:0}
.item{border:1px solid var(--card-border);border-radius:0;padding:var(--card-gap);margin:var(--card-gap) 0}
.item>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px}
.item>summary::after{margin-left:auto}
.item-title{font-weight:650}
.item-date{color:var(--muted);font-size:.86rem;display:block;margin-top:2px}
.item p{margin:7px 0 0}
.item .portfolio-read-more{display:flex;justify-content:flex-end;margin:7px 0 0;text-align:right}
.item-content{padding:var(--card-gap) 0 0;margin-top:var(--card-gap)}
.more-items{margin:var(--card-gap) 0 0;padding:0}
.more-items>summary{cursor:pointer;color:var(--accent);text-decoration:underline;list-style:none;font-weight:600;padding:3px 0}
.more-items[open]>summary{margin-bottom:7px}
.rich{overflow-wrap:anywhere}
.rich p{margin:0 0 var(--card-gap)}
.rich h2,.rich h3,.rich h4{margin:var(--card-gap) 0 6px}
.rich ul,.rich ol{margin:6px 0 var(--card-gap);padding-left:21px}
.rich blockquote{margin:10px 0;padding:0 0 0 12px}
.rich img{max-width:100%;height:auto}
.rich pre{overflow:auto;padding:10px;background:var(--hover);border:1px solid var(--line);border-radius:0}
.rich a{overflow-wrap:anywhere}
/* Rich-text horizontal rules are replaced server-side by this quiet, small space. */
.rich div:has(>br:only-child){height:9px;line-height:0;overflow:hidden}
.rich hr{display:none}
.muted,.small{color:var(--muted)}
.small{font-size:.86rem}
.empty{color:var(--muted);padding:4px 0}
.back-card{padding:0 var(--card-pad)}
.back-link{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;font-weight:700;font-size:1rem;text-decoration:none;color:var(--accent)}
.back-link:hover{text-decoration:none}
.back-arrow{display:inline-block;margin-left:auto;font-size:.8rem;font-weight:500;color:var(--muted)}
.profile-link-card{padding:0 var(--card-pad)}
.profile-link,.profile-link:visited{color:var(--text)}
.profile-link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;text-decoration:none;font-weight:700;font-size:1rem}
.profile-link:hover{text-decoration:none}
.profile-link span:last-child{font-size:.8rem;font-weight:500;color:var(--muted)}
/* Content typography is compact; header/card navigation keeps its existing size. */
.section-content,.detail-card{font-size:13px;line-height:1.35}
.section-content .rich,.detail-card .rich{line-height:1.35}
.profile-card{padding:var(--card-pad)}
.detail-card{padding:var(--card-pad)}
.detail-card h2{font-size:1.35rem;margin-bottom:5px}
.profile-card h2{margin-bottom:9px}
/* No inset: Profile introduction, table headings and data share a left edge. */
.profile-card h3{margin:var(--card-gap) 0 3px;padding:0;text-align:left}
/* Borderless Profile tables with modest vertical cell padding; no horizontal inset so content stays aligned. */
.profile-table{width:100%;table-layout:fixed;border-collapse:collapse;border-spacing:0;border:0;margin:0 0 var(--card-gap);padding:0;background:transparent;line-height:1.28}
.profile-table caption{caption-side:top;text-align:left;padding:0;margin:0 0 3px;font-size:14px;font-weight:700;line-height:1.3;color:var(--text);border:0}
.profile-table tr,.profile-table th,.profile-table td{background:transparent;border:0}
.profile-table th,.profile-table td{width:50%;min-width:0;padding:4px 0;margin:0;vertical-align:middle;overflow-wrap:anywhere;word-break:normal;border:0;line-height:1.28}
.profile-table th{text-align:left;font-weight:600;color:var(--text)}
.profile-table td{text-align:right;color:var(--muted)}
.profile-table td a{color:inherit}
/* Five circles run visually from level 5 at left to level 1 at right. */
.skill-rating{display:inline-flex;align-items:center;justify-content:flex-end;gap:2px;white-space:nowrap;line-height:1;vertical-align:middle;color:var(--text);cursor:help}
.skill-disc{display:inline-block;opacity:1;line-height:1}
.skill-disc.is-inactive{opacity:.1}
.profile-intro{margin:0 0 var(--card-gap);line-height:1.35}
.profile-intro>:last-child{margin-bottom:0}
.contact-form-block>h3{margin:0 0 4px}
.contact-intro{margin:0 0 var(--card-gap);color:var(--muted)}
.contact-form-block form{margin:0}
.contact-form-block form>p:last-child{margin-bottom:0}
.download-row{display:flex;align-items:center;justify-content:space-between;gap:var(--card-gap);flex-wrap:wrap;border:1px solid var(--card-border);border-radius:0;padding:var(--card-gap);margin:var(--card-gap) 0}
.download-row p{margin:2px 0 0}
.download-row strong{overflow-wrap:anywhere}
.download-row form{margin:0}
input,textarea,select,button{font:inherit}
label{display:block;font-weight:600;margin:var(--card-gap) 0 4px}
input,textarea,select{color:var(--text);background:var(--hover);border:1px solid var(--line);outline:0;box-shadow:none;border-radius:0;padding:var(--control-py) var(--control-px);width:100%;max-width:100%}
textarea{resize:vertical;min-height:110px}
button,.button{background:var(--accent);color:var(--button-text);padding:7px 13px;border-radius:0;border:1px solid var(--accent);cursor:pointer;text-decoration:none;display:inline-block;font-weight:650}

input:hover,textarea:hover,select:hover,button:hover,.button:hover{border-color:var(--accent)}
/* Focus changes the color of the existing 1px border, never its width. */
input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible,.button:focus-visible{border-width:1px;border-color:var(--accent);outline:0;box-shadow:none}
a:focus-visible,summary:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
.notice{padding:var(--card-gap);background:var(--hover);border:1px solid var(--line);border-radius:0;margin:var(--card-gap) 0}
.cf-turnstile{margin:10px 0}
.like-form{display:inline-block;margin:6px 0 0}
.heart-button{display:inline-flex;gap:7px;align-items:center;justify-content:center;padding:3px 9px;min-width:62px;font-weight:600;font-size:.92rem;line-height:1.4}
.heart-button span:first-child{font-size:1.16rem;line-height:1}
.heart-button:disabled{cursor:default;opacity:.8}
.heart-button.is-liked{background:var(--hover);color:var(--accent);border-color:var(--line)}
.item .like-form{display:block;margin-top:6px}
.blog-likes{display:block;margin-top:13px;padding-top:6px}
.blog-likes form{margin:0}
.like-total,.item-likes{font-size:.86rem;color:var(--muted)}
.item-likes{display:block;margin-top:3px}
.liked-note{color:var(--accent);font-weight:600}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.footer{font-size:.8rem;color:color-mix(in srgb,var(--bg) 67%,var(--footer-contrast) 33%);display:flex;justify-content:space-between;gap:var(--card-gap);margin:var(--card-gap) 0 0}
.footer a{color:inherit;text-decoration:none}
.footer a:hover{text-decoration:none}
@media(max-width:480px){
  .footer{flex-wrap:wrap}
}

/* 1.4.5: Match every public link state to the card-heading text in all themes.
   Link buttons are excluded so their label keeps adequate contrast. */
a:link,
a:visited,
a:hover,
a:active{color:var(--text)}
/* These icons are part of links and inherit the same title color. */
.back-arrow,.profile-link span:last-child{color:inherit}
/* "Show more" looks like a link but is a <summary> control. */
.more-items>summary{color:var(--text)}
/* Retain readable text on filled link-buttons if any are added to site content. */
a.button:link,
a.button:visited,
a.button:hover,
a.button:active{color:var(--card)}
html[data-theme="dark"] a.button:link,
html[data-theme="dark"] a.button:visited,
html[data-theme="dark"] a.button:hover,
html[data-theme="dark"] a.button:active,
html[data-theme="blueprint"] a.button:link,
html[data-theme="blueprint"] a.button:visited,
html[data-theme="blueprint"] a.button:hover,
html[data-theme="blueprint"] a.button:active{color:#0d2434}

/* Footer text AND links: 33% toward black on light themes and toward white on dark themes.
   Never show an underline, including hover, active and visited states. */
.footer a:link,.footer a:visited,.footer a:hover,.footer a:active,.footer a:focus-visible{color:inherit;text-decoration:none}
/* Link-buttons retain palette-specific text contrast. */
a.button:link,a.button:visited,a.button:hover,a.button:active{color:var(--button-text)}

/* Card headings never acquire an underline in any link/interaction state.
   Keep the 1px keyboard-focus outline so they remain accessible. */
.profile-link:link,.profile-link:visited,.profile-link:hover,.profile-link:active,.profile-link:focus-visible,
.back-link:link,.back-link:visited,.back-link:hover,.back-link:active,.back-link:focus-visible,
.item-title:link,.item-title:visited,.item-title:hover,.item-title:active,.item-title:focus-visible,
.section-details>summary,.section-details>summary:hover,.section-details>summary:focus-visible,
.item>summary,.item>summary:hover,.item>summary:focus-visible{
  text-decoration:none;
}
/* Form interactions keep precisely one visible 1px border. */
input:active,textarea:active,select:active,button:active,.button:active{border-width:1px}

/* 1.6.9: In public content, a link matches the text of its surrounding
   paragraph or table cell in normal, visited, hover and focus states.
   Navigation/card headings, social icons, buttons and the footer retain
   their separate theme-appropriate styling. */
:is(.section-content,.detail-card) a:not(.social-icon):not(.button):is(:link,:visited,:hover,:active,:focus-visible){
  color:inherit;
}


/* Social-account list follows the contact form; the icon row remains above the footer. */
.social-account-table {
    width:100%;table-layout:fixed;border-collapse:collapse;border-spacing:0;
    margin:var(--card-gap) 0 0;padding:0;background:transparent;
    font-size:inherit;line-height:1.35;
}
.social-account-table caption {
    caption-side:top;text-align:left;color:var(--text);
    font:700 14px/1.35 var(--font-heading);padding:0;margin:0 0 4px;
}
.social-account-table tr,.social-account-table th,.social-account-table td {
    border:0;background:transparent;
}
.social-account-table th,.social-account-table td {
    padding:4px 0;vertical-align:top;overflow-wrap:anywhere;
}
.social-account-table th {width:34%;text-align:left;font-weight:600;color:var(--text)}
.social-account-table td {width:66%;text-align:right;color:var(--muted)}
.social-account-table td a:is(:link,:visited,:hover,:active,:focus-visible){color:inherit}