/* Original warm editorial redesign for the main portfolio. */
:root {
  --background-color:#f6f4ef; --surface-color:#fffefa; --default-color:#353c37;
  --heading-color:#17251f; --accent-color:#d45d3e; --contrast-color:#fffefa;
  --nav-color:#64716a; --nav-hover-color:#17251f; --nav-mobile-background-color:#f6f4ef;
  --nav-dropdown-background-color:#fffefa; --nav-dropdown-color:#353c37;
  --nav-dropdown-hover-color:#d45d3e; --default-font:"Roboto","Segoe UI",sans-serif;
  --heading-font:"Raleway","Segoe UI",sans-serif; --nav-font:"Poppins","Segoe UI",sans-serif;
  --line:#e8e3d9; --green:#244c3c; --paper:#f6f4ef;
}
html { scroll-behavior:smooth; scroll-padding-top:2rem; }
body { background:var(--paper); color:var(--default-color); font-family:var(--default-font); font-size:16px; letter-spacing:.018em; line-height:1.7; }
::selection { color:#fff; background:var(--green); }
a { color:var(--accent-color); text-decoration:none; }
a:hover { color:#a53c26; }
:focus-visible { outline:3px solid #e28a67; outline-offset:4px; }
h1,h2,h3,h4,h5,h6 { color:var(--heading-color); font-family:var(--heading-font); letter-spacing:-.015em; }
.header { width:282px; padding:2.4rem 1.75rem; background:#eeece5; border-right:1px solid var(--line); color:var(--heading-color); }
.header .profile-img img { width:104px; height:104px; object-fit:cover; border:4px solid #fffefa; box-shadow:0 8px 24px #17251f18; }
.header .logo { margin:1rem 0 1.1rem; }
.header .logo h1 { color:var(--heading-color); font-size:1.3rem; letter-spacing:-.02em; }
.header .social-links { margin:.35rem 0 2rem; }
.header .social-links a { width:36px; height:36px; color:var(--green); background:#fffefa; border:1px solid var(--line); }
.header .social-links a:hover { color:#fff; background:var(--green); }
.header .navmenu a,.header .navmenu a:focus { margin:.1rem 0; padding:.65rem .7rem; color:#68736d; font-size:.9rem; border-radius:8px; }
.header .navmenu a .navicon { color:inherit; }
.header .navmenu a:hover,.header .navmenu .active,.header .navmenu .active:focus { color:var(--heading-color); background:#e3e4db; }
.header .navmenu a:hover .navicon,.header .navmenu .active .navicon { color:var(--accent-color); }
.main { margin-left:282px; }
section,.section { padding:6rem 0; scroll-margin-top:1rem; overflow:clip; }
.container { width:100%; max-width:1120px; padding-inline:clamp(1rem,3vw,2.25rem); }
.row { --bs-gutter-x:clamp(1.25rem,2.4vw,2rem); --bs-gutter-y:1.5rem; }
.section-title { padding-bottom:2.5rem; }
.section-title h2 { margin-bottom:1rem; font-size:clamp(2rem,3.3vw,2.8rem); font-weight:700; }
.section-title h2:after { width:42px; height:3px; margin-top:1rem; background:var(--accent-color); }
.section-title p { max-width:690px; color:#68736d; }
.hero { display:flex; align-items:center; min-height:100vh; min-height:100svh; isolation:isolate; background:#1c352b; }
.hero:before { position:absolute; z-index:-1; inset:0; content:""; background:linear-gradient(90deg,#142b22ef,#142b22c4 54%,#142b2270),radial-gradient(ellipse at 85% 22%,#cb71504d,transparent 46%); }
.hero>img { inset:0; width:100%; height:100%; object-fit:cover; opacity:.38; }
.hero .container { position:relative; padding:clamp(2rem,8vw,7.5rem); }
.hero h2 { max-width:750px; margin-bottom:1.6rem; font-size:clamp(3.4rem,8vw,7rem); line-height:.98; letter-spacing:-.045em; }
.hero p { color:#f6f4ef; font-size:clamp(1.25rem,2.2vw,1.8rem); }
.hero .typed,.hero .typed-cursor { color:#f0aa8b; }
.hero .hero-eyebrow { display:inline-flex; align-items:center; gap:.65rem; margin:0 0 1.35rem; padding:.5rem .8rem; color:#f4c2ad; background:#12281f70; border:1px solid #ffffff38; border-radius:999px; font-size:.76rem; font-weight:700; letter-spacing:.13em; line-height:1.3; text-transform:uppercase; }
.hero .hero-eyebrow span { width:.55rem; height:.55rem; border-radius:50%; background:#f2a082; box-shadow:0 0 0 4px #f2a08225; }
.hero .hero-role { margin:0; font-size:clamp(1.3rem,2.6vw,2rem); font-weight:500; letter-spacing:-.01em; }
.hero .hero-role .typed { color:#f0aa8b; }
.hero .hero-intro { display:block; max-width:540px; margin:1.1rem 0 0; color:#e1e8e2; font-size:1.05rem; line-height:1.8; }
.hero .hero-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.7rem; }
.hero .hero-actions a { display:inline-flex; align-items:center; gap:.55rem; min-height:48px; padding:.85rem 1.3rem; color:#fff; border:1px solid #ffffff6b; border-radius:999px; font-size:.9rem; font-weight:600; }
.hero .hero-actions a:first-child { color:var(--heading-color); background:#f3a184; border-color:#f3a184; }
.hero .hero-actions a:hover { transform:translateY(-2px); }
.about .content h2 { font-size:clamp(1.6rem,3vw,2.25rem); }
.about .row>.col-lg-4 img { width:100%; max-height:480px; object-fit:cover; border-radius:14px; }
.about ul { padding:0; list-style:none; }
.about ul li { margin:.5rem 0; }
.about ul li i { color:var(--accent-color); }
.light-background,.skills,.portfolio { --background-color:#eeece5; --surface-color:#fffefa; }
.single-skillgroup,.resume-item,.info-wrap,.php-email-form { background:var(--surface-color); border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 28px #17251f08; }
.single-skillgroup { margin-bottom:1rem; padding:1.4rem 1.5rem; }
.single-skillgroup h3 { font-size:1.05rem; letter-spacing:-.02em; }
.single-skillgroup ul { padding-left:1.15rem; margin-bottom:0; color:#68736d; }
.resume .row>[class*="col-"] { display:flex; flex-direction:column; gap:1.35rem; }
.resume .resume-title { margin:0; padding:0 0 .25rem; color:var(--green); }
.resume .resume-item,.resume .resume-item:last-child { position:relative; margin:0; padding:1.5rem; border:1px solid var(--line); border-left:4px solid var(--accent-color); border-radius:14px; background:var(--surface-color); box-shadow:0 12px 32px #17251f0b; }
.resume .resume-item::before { display:none; }
.resume .resume-item h4 { margin-bottom:.75rem; font-size:1.08rem; line-height:1.35; text-transform:none; }
.resume .resume-item h5 { margin-bottom:.8rem; padding:.15rem .55rem; color:var(--green); background:#e9efe9; border-radius:999px; font-size:.8rem; }
.resume .resume-item p:last-child,.resume .resume-item ul:last-child { margin-bottom:0; }
.resume .section-title a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:.7rem 1.15rem; color:#fff; background:var(--green); border-radius:999px; font-weight:600; }
.resume .section-title a:hover { color:#fff; background:var(--accent-color); }
.portfolio .portfolio-filters { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:.65rem; width:fit-content; max-width:100%; margin:0 0 2rem; padding:.45rem; list-style:none; text-align:left; border:1px solid #e1ddd3; border-radius:999px; background:#e8e5dd; }
.portfolio .portfolio-filters li { display:inline-flex; align-items:center; justify-content:center; min-height:44px; margin:0; padding:.65rem 1.1rem; color:#526159; background:transparent; border:1px solid transparent; border-radius:999px; font-size:.9rem; font-weight:600; line-height:1.2; cursor:pointer; transition:color .2s ease,background-color .2s ease,box-shadow .2s ease,transform .2s ease; }
.portfolio .portfolio-filters li:hover { color:var(--green); background:#fffefa; transform:translateY(-1px); }
.portfolio .portfolio-filters li.filter-active { color:#fffefa; background:var(--green); box-shadow:0 4px 12px #244c3c25; }
.portfolio .portfolio-content { height:100%; min-height:0; padding:1.35rem; border:1px solid #e4dfd5; border-radius:16px; background:#fffefa; box-shadow:0 8px 24px #17251f0a; transition:box-shadow .25s ease; }
.portfolio .portfolio-item { transition:none; }
.portfolio .portfolio-item:hover .portfolio-content { box-shadow:0 18px 38px #17251f16; }
.portfolio .portfolio-content .portfolio-info { position:static; inset:auto; z-index:auto; display:flex; flex-direction:column; align-items:flex-start; gap:.35rem; height:100%; padding:0; opacity:1; background:transparent; }
.portfolio .portfolio-content .project-category { color:var(--accent-color); font-size:.72rem; font-weight:700; letter-spacing:.1em; line-height:1.4; text-transform:uppercase; }
.portfolio .portfolio-content .portfolio-info h4 { display:block; margin:0; padding:0; color:var(--heading-color); background:transparent; font-size:1.08rem; font-weight:700; letter-spacing:.005em; }
.portfolio .portfolio-content .portfolio-info p { position:static; display:block; margin:.2rem 0 0; color:#68736d; font-size:.9rem; font-weight:400; line-height:1.6; text-align:left; }
.info-item p { color:#68736d; }
.info-wrap,.php-email-form { height:100%; padding:1.5rem; }
.info-item { margin-bottom:1.25rem; }
.info-item>i { color:var(--accent-color); }
.info-item h3 { font-size:1rem; }
.info-item p { margin:0; }
.php-email-form label { font-size:.9rem; font-weight:600; }
.php-email-form input,.php-email-form textarea { padding:.75rem .9rem; background:#fff; border:1px solid var(--line); border-radius:8px; }
.php-email-form input:focus,.php-email-form textarea:focus { border-color:var(--green); box-shadow:0 0 0 .2rem #244c3c20; }
.php-email-form button { padding:.75rem 1.2rem; background:var(--green); border-radius:999px; }
.php-email-form button:hover { background:var(--accent-color); }
.footer { padding:2rem 0; color:#68736d; background:#e9e6de; }
.footer .sitename { color:var(--heading-color); }
.scroll-top { background:var(--green); }
@media(max-width:1199px) {
  .header { width:300px; padding:1.75rem; }
  .main { margin-left:0; }
  .header-toggle { top:1rem; right:1rem; width:42px; height:42px; color:#fff; background:var(--green); border:0; border-radius:50%; font-size:1.35rem; }
  .hero .container { padding:5rem 2rem; }
}
@media(max-width:767px) {
  .container { padding-inline:1.15rem; }
  .row { --bs-gutter-x:1.25rem; --bs-gutter-y:1.25rem; }
  section,.section { padding-block:4.25rem; }
  .section-title { margin-bottom:.25rem; }
}
@media(max-width:575px) {
  section,.section { padding:4rem 0; }
  .hero { min-height:100vh; min-height:100svh; }
  .hero .container { padding:4.5rem 1.25rem; }
  .hero h2 { font-size:clamp(3.1rem,15vw,5rem); }
  .section-title { padding-bottom:1.8rem; }
  .about .row>.col-lg-4 img { max-height:340px; }
  .portfolio .portfolio-content { padding:1.15rem; }
  .portfolio .portfolio-filters { width:100%; justify-content:center; gap:.35rem; border-radius:18px; }
  .portfolio .portfolio-filters li { padding:.6rem .85rem; font-size:.84rem; }
  .resume .resume-item,.resume .resume-item:last-child { padding:1.2rem; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}
.header.dark-background { --background-color:#eeece5; --default-color:#353c37; --heading-color:#17251f; --surface-color:#fffefa; --contrast-color:#17251f; }
.container { width:100%; padding-inline:clamp(1rem,3vw,2.25rem); }
.row { --bs-gutter-x:clamp(1.25rem,2.4vw,2rem); --bs-gutter-y:1.5rem; }
button,input[type="submit"],input[type="button"],.btn { min-height:44px; padding:.7rem 1.15rem; }
.header-toggle { padding:.55rem; }
.hero .hero-actions a { min-height:48px; padding:.85rem 1.3rem; }
.portfolio-filters { gap:.65rem; margin-bottom:1.75rem; }
.portfolio-filters li { min-height:42px; display:inline-flex; align-items:center; padding:.55rem 1rem; }
@media(max-width:767px) { .container { padding-inline:1.15rem; } .row { --bs-gutter-x:1.25rem; --bs-gutter-y:1.25rem; } section,.section { padding-block:4.25rem; } .section-title { margin-bottom:.25rem; } }