/*
Theme Name: Kaitlyn Portfolio
Author: Kaitlyn Kahrim
Description: A custom mechanical engineering portfolio with editable project case studies.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: kaitlyn-portfolio
License: GPL-2.0-or-later
*/

:root{--ink:#182d3b;--muted:#627078;--paper:#f6f5f0;--line:#d9dedb;--accent:#547565}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.65}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}header{position:sticky;top:0;z-index:4;background:#f6f5f0ed;backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}nav{max-width:1240px;margin:auto;height:86px;display:flex;align-items:center;justify-content:space-between;padding:0 48px}.brand{font-weight:700;font-size:18px;letter-spacing:-.5px}.brand span{color:var(--accent)}.navlinks{display:flex;gap:32px;align-items:center;font-size:13px}.navlinks a:last-child{border:1px solid #bac5bd;padding:9px 18px;border-radius:3px}main{max-width:1240px;margin:auto;padding:0 48px}.hero{padding:87px 0 69px;display:grid;grid-template-columns:1.45fr 1fr;gap:65px;align-items:center}.eyebrow{text-transform:uppercase;font-size:11px;font-weight:700;letter-spacing:2px;color:var(--accent)}h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(45px,5vw,68px);line-height:1.08;letter-spacing:-2.8px;margin:22px 0}h1 em{font-weight:400;color:var(--accent)}.intro{max-width:530px;color:var(--muted);font-size:17px;line-height:1.8}.buttons{display:flex;gap:22px;align-items:center;margin-top:29px;font-size:13px;font-weight:700}.primary{background:var(--ink);color:white;padding:13px 22px;border-radius:3px}.hero-art{height:340px;position:relative;background:#e7ece5;border-radius:3px;overflow:hidden}.hero-art svg{width:100%;height:100%}.art-label{position:absolute;bottom:17px;left:20px;font-family:monospace;font-size:9px;letter-spacing:1px;color:#4c655c}.corner{position:absolute;right:18px;top:15px;font-size:10px;letter-spacing:1px;color:#597065}.facts{display:grid;grid-template-columns:repeat(3,1fr);padding:23px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);gap:20px}.facts div{font-size:12px;color:var(--muted)}.facts strong{display:block;font-size:14px;font-weight:600;color:var(--ink)}section{padding:75px 0}.section-top{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px}h2{font-family:Georgia,serif;font-size:38px;font-weight:400;letter-spacing:-1px;line-height:1.2;margin:10px 0 0}.section-note{font-size:12px;color:var(--muted)}.filters{display:flex;gap:8px;margin-bottom:28px}.filters button{border:1px solid var(--line);background:transparent;border-radius:20px;padding:6px 17px;font-size:12px;color:var(--muted)}.filters button.active{background:var(--ink);border-color:var(--ink);color:white}.projects{display:grid;grid-template-columns:repeat(2,1fr);gap:38px 28px}.project[hidden]{display:none}.project-visual{height:264px;position:relative;overflow:hidden;background:#e5e9e5;border-radius:3px}.project-visual svg{width:100%;height:100%}.project-visual small{position:absolute;left:18px;bottom:13px;font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#4d625a}.num{position:absolute;left:18px;top:14px;font-family:monospace;font-size:11px}.category{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent);margin-top:20px}h3{font-size:23px;letter-spacing:-.6px;margin:7px 0;font-weight:500;line-height:1.3}.project p{color:var(--muted);font-size:14px;max-width:470px;margin:10px 0 16px}.tags{display:flex;gap:7px;flex-wrap:wrap}.tags span{font-size:10px;border:1px solid var(--line);padding:3px 8px;border-radius:3px}.project button{padding:0;background:none;border:0;border-bottom:1px solid #a7b3ac;margin-top:20px;font-size:12px;font-weight:600;color:var(--ink)}.about{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1.3fr;gap:80px}.about p{color:var(--muted);font-size:15px}.skills{display:flex;flex-wrap:wrap;gap:9px;margin-top:25px}.skills span{border-bottom:1px solid var(--line);padding:6px 0;margin-right:16px;font-size:12px}.leadership{border-top:1px solid var(--line);padding-top:25px;margin-top:25px}.contact{background:var(--ink);color:#f5f5ef;padding:55px 48px;display:flex;justify-content:space-between;align-items:center;margin-bottom:45px;border-radius:3px}.contact h2{font-size:36px}.contact p{font-size:13px;color:#bcc9cb}.contact a{background:#f5f5ef;color:var(--ink);padding:13px 23px;font-size:13px;border-radius:3px}footer{display:flex;justify-content:space-between;padding:0 0 28px;color:var(--muted);font-size:11px}footer a{margin-left:20px}dialog{border:0;border-radius:6px;max-width:660px;width:calc(100% - 36px);padding:38px;color:var(--ink);background:var(--paper)}dialog::backdrop{background:#132732b0;backdrop-filter:blur(4px)}dialog h2{font-size:30px}dialog p{font-size:15px;color:var(--muted)}dialog h4{margin-bottom:0}dialog button{float:right;border:1px solid var(--line);background:none;border-radius:3px;padding:4px 12px}a:focus-visible,button:focus-visible{outline:3px solid #9caf8a;outline-offset:5px}@media(max-width:760px){nav{height:72px;padding:0 22px}.navlinks{gap:17px}.navlinks a:last-child{display:none}main{padding:0 22px}.hero{grid-template-columns:1fr;padding:48px 0;gap:32px}h1{font-size:49px}.hero-art{height:270px}.facts{grid-template-columns:1fr;gap:16px}.section-top{display:block}.section-note{margin-top:15px}.projects{grid-template-columns:1fr}.about{grid-template-columns:1fr;gap:20px}section{padding:50px 0}.contact{padding:30px 24px;display:block}.contact a{display:inline-block;margin-top:15px}footer{gap:15px;flex-wrap:wrap}.filters{flex-wrap:wrap}}

.project-visual img{width:100%;height:100%;object-fit:cover}.single-content{max-width:800px;margin:60px auto;min-height:55vh}.single-content img{max-width:100%;height:auto}.single-content h1{font-size:48px}.single-content p,.single-content li{color:var(--muted)}.skip-link{position:fixed;left:20px;top:-100px;background:white;padding:10px;z-index:99}.skip-link:focus{top:12px}body.admin-bar header{top:32px}dialog img{max-width:100%;height:auto}@media(max-width:782px){body.admin-bar header{top:46px}}

/* Text wordmark */
.brand{display:flex;flex-direction:column;gap:7px;flex-shrink:0;line-height:1.05}
.brand .brand-name{font-size:28px;font-weight:700;letter-spacing:-1.1px;color:var(--ink)}
.brand .brand-subtitle{font-size:8px;font-weight:400;letter-spacing:1.35px;text-transform:uppercase;color:var(--accent);line-height:1.4}
@media(max-width:900px){.navlinks{gap:20px}.brand .brand-name{font-size:25px}.brand .brand-subtitle{font-size:7px;letter-spacing:1.15px}}
@media(max-width:560px){nav{height:auto;min-height:107px;flex-wrap:wrap;padding-top:16px;padding-bottom:13px;gap:15px}.brand .brand-name{font-size:25px}.brand .brand-subtitle{font-size:7px;letter-spacing:1.1px}.navlinks{width:100%;gap:23px;font-size:12px}html{scroll-padding-top:130px}}

/* Larger, more readable typography throughout the portfolio. */
body{font-size:18px;line-height:1.7}
nav{min-height:104px;height:auto;padding-top:18px;padding-bottom:18px;gap:24px}
.brand .brand-name{font-size:32px}
.brand .brand-subtitle{font-size:10px;letter-spacing:1.2px}
.navlinks{font-size:15px;gap:26px}
.eyebrow{font-size:13px;letter-spacing:1.7px}
h1{font-size:clamp(52px,5.4vw,74px)}
.intro{font-size:20px;line-height:1.8}
.buttons{font-size:16px;gap:24px}
.primary{padding:15px 24px}
.art-label{font-size:11px;letter-spacing:.6px}
.corner{font-size:12px}
.facts{padding:28px 0;gap:30px}
.facts div{font-size:15px}
.facts strong{font-size:17px;margin-bottom:4px}
h2{font-size:43px}
.section-note{font-size:15px;max-width:340px}
.section-top{gap:28px}
.filters{gap:10px;flex-wrap:wrap}
.filters button{font-size:15px;padding:8px 20px}
.project-visual small{font-size:11px;letter-spacing:.7px}
.num{font-size:13px}
.category{font-size:12px;letter-spacing:1.2px;line-height:1.7}
h3{font-size:27px;line-height:1.35}
.project p{font-size:17px;line-height:1.75}
.tags{gap:8px}
.tags span{font-size:13px;padding:4px 9px}
.project button{font-size:16px;margin-top:22px}
.about p{font-size:18px;line-height:1.8}
.skills span{font-size:15px}
.contact{gap:34px}
.contact h2{font-size:40px}
.contact p{font-size:16px}
.contact a{font-size:16px;white-space:nowrap}
footer{font-size:14px;gap:20px;flex-wrap:wrap}
footer div{display:flex;gap:22px;flex-wrap:wrap}
footer a{margin-left:0}
dialog{max-width:740px;padding:38px;line-height:1.75}
dialog h2{font-size:36px}
dialog p{font-size:18px}
dialog h4{font-size:20px}
dialog button{font-size:16px;padding:6px 14px;margin-left:16px}
.single-content h1{font-size:54px}
@media(max-width:1050px){
 nav{flex-wrap:wrap;gap:18px}
 .navlinks{gap:23px}
 .brand .brand-name{font-size:30px}
 .brand .brand-subtitle{font-size:10px}
 .hero{gap:34px}
}
@media(max-width:760px){
 h1{font-size:56px;letter-spacing:-2px}
 h2{font-size:38px}
 .hero{padding-top:44px}
 .section-note{margin-top:17px}
 .contact h2{font-size:36px}
 .facts{gap:20px}
 .art-label{max-width:calc(100% - 34px);line-height:1.5}
 .single-content h1{font-size:44px}
}
@media(max-width:560px){
 nav{padding:18px 22px 16px;gap:18px;min-height:125px}
 .brand .brand-name{font-size:30px}
 .brand .brand-subtitle{font-size:9px;letter-spacing:.9px}
 .navlinks{font-size:15px;gap:25px;width:100%}
 html{scroll-padding-top:150px}
 h1{font-size:50px}
 h3{font-size:26px}
 .intro{font-size:19px}
 .buttons{gap:18px;flex-wrap:wrap}
 .eyebrow{font-size:12px}
 .hero-art{height:285px}
 .contact{padding:32px 24px}
 .contact h2{font-size:34px}
 dialog{padding:26px}
 dialog h2{font-size:30px}
 .single-content h1{font-size:40px}
}

/* Navy and blue portfolio palette. */
:root{--ink:#112a46;--muted:#596c82;--paper:#f4f6f9;--line:#d7e0eb;--accent:#365b85}
header{background:#f4f6f9f2}
.hero-art{background:#e5edf7}
.project-visual{background:#e6edf6}
.art-label,.corner{color:#49627e}
.project-visual small{color:#49627e}
.project button{border-bottom-color:#a8bbd2}
.navlinks a:last-child{border-color:#b8c8db}
.contact{background:#112a46;color:#f4f6f9}
.contact p{color:#c5d2e4}
.contact a{background:#f4f6f9;color:#112a46}
a:focus-visible,button:focus-visible{outline-color:#779bc7}
dialog::backdrop{background:#112a46b8}