@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
:root{--paper:#cdc6be;--card:#cdc6be;--ink:#1d1d1b;--ink2:#1d1d1b;--hot:#1d1d1b;--gold:#1d1d1b;--rust:#1d1d1b;
--font-body:clamp(1.05rem,1rem + .2vw,1.15rem);
--font-subtitle:clamp(1.15rem,1.1rem + .25vw,1.3rem);
--font-title:clamp(1.2rem,1.1rem + .5vw,1.45rem);
--font-display:clamp(1.6rem,1.25rem + 1.4vw,2.3rem)}
body{background-color:var(--paper)!important;color:var(--ink)!important;border-color:var(--ink)!important;font-family:'Playfair Display',Georgia,serif!important;font-weight:600!important;font-size:var(--font-body)!important;letter-spacing:-.02em!important}
body :where(h1,h2,h3,h4,h5,h6,p,a,span,div,section,article,li,button,label,input,textarea,select,blockquote,small,strong,em){font-family:'Playfair Display',Georgia,serif!important;font-weight:600!important;letter-spacing:-.02em!important;color:var(--ink)!important}
#skills-board,#skills-board *{font-family:'Playfair Display',Georgia,serif!important;font-weight:600!important;letter-spacing:-.02em!important}
::selection{background:var(--hot);color:var(--paper)}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.4;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
[class*="border-[#111111]"]{border-color:var(--ink)}
[class*="border-[#2A2A2A]"]{border-color:var(--hot)}
[class*="border-b-4"]{border-bottom-color:var(--hot)}
section[class*="border-l-4"]{border-left-color:var(--hot)}
[class*="text-[#2A2A2A]"],[class*="text-[#111111]"]{color:var(--ink2)}
[class*="text-[#4D4D4D]"]{color:var(--rust)}
[class*="marker:text-[#2A2A2A]"]::marker{color:var(--rust)}
/* ===== Unified type scale: display > title > subtitle > body ===== */
/* Every element gets ONE body size, so dates, locations, links, "See More" and paragraphs always match */
html body *{font-size:var(--font-body)!important;line-height:1.5!important;letter-spacing:-.02em!important}
/* Titles */
html body :is(h1,h2,h3,h4,h5,h6),
html body .education-title,html body .job-company{font-size:var(--font-title)!important;line-height:1.2!important}
/* Anything inside a title (links, spans) follows the title */
html body :is(h1,h2,h3,h4,h5,h6) *,
html body .education-title *,html body .job-company *{font-size:inherit!important;line-height:inherit!important}
/* Titles a step bolder than content so the hierarchy stays clear */
html body :is(h1,h2,h3,h4,h5,h6),html body :is(h1,h2,h3,h4,h5,h6) *,
html body .education-title,html body .job-company,html body .education-title *,html body .job-company *{font-weight:800!important}
/* Header name */
html body header h1{font-size:var(--font-display)!important;line-height:1.05!important}
/* Subtitles */
html body .education-subtitle,html body .job-role,
html body .education-subtitle *,html body .job-role *{font-size:var(--font-subtitle)!important;line-height:1.35!important}
/* Icons follow the text next to them */
html body i{font-size:inherit!important;line-height:inherit!important}
article[class*="bg-[#F5F5F5]"]{background:var(--card);border-radius:10px;border-color:var(--ink);box-shadow:5px 5px 0 var(--hot);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
article[class*="bg-[#F5F5F5]"]:hover,[class*="grid-cols-3"]>a:hover{border-right-width:2px!important;border-bottom-width:2px!important;border-right-color:var(--ink)!important;border-bottom-color:var(--ink)!important;box-shadow:none;transform:translate(5px,5px)}
span[class*="uppercase"][class*="border-2"]{border-radius:999px;border-color:var(--hot);color:var(--rust)}
[class*="grid-cols-3"]>a{padding:1rem;background:var(--card);border:2px solid var(--ink);border-radius:10px;box-shadow:5px 5px 0 var(--hot);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
[class*="grid-cols-3"]>a>img{border-radius:4px;box-shadow:none}
.mast{position:relative;background:#111111;border-bottom:6px solid var(--hot)}
.mast>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.mast>div{position:relative;z-index:1;border:0!important;padding:2.4rem 1.5rem 1.6rem!important}
.mast h1,.mast div,.mast a,.mast span{color:var(--paper)!important}
.mast i{color:var(--gold)!important}
.mast a:hover{border-color:var(--gold)!important;color:var(--gold)!important}
.mast h1{font-size:clamp(2rem,4vw,3rem)!important}
.mast h1,.mast div[class*="Amiri"]{text-shadow:0 2px 0 rgba(0,0,0,.35)}