:root{--font-display:"Barlow Condensed","Arial Narrow",sans-serif}
.hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(2.6rem,5.2vw,4.7rem);letter-spacing:-.025em;line-height:1;white-space:nowrap}
.heading h2,.business h2,.contact h2{font-family:var(--font-display);font-weight:700;letter-spacing:-.015em;font-size:clamp(2rem,4vw,3.6rem);line-height:1.1}
.heading h2 em,.contact h2 em,.business h2 em{font-style:normal;color:#F16913}
.business h2{font-size:clamp(4rem,8vw,7rem)}
.nav-shell nav{gap:3px;min-width:0}.nav-shell nav a{padding:9px 9px;border-radius:11px;font-size:.8rem;white-space:nowrap;transition:box-shadow .2s,color .2s}.nav-shell nav a.active{box-shadow:var(--in);color:var(--blue)}.nav-shell .pill.active{box-shadow:var(--in);background:var(--bg);color:var(--blue)}.nav-shell{gap:10px}
#education .row>b{color:#F16913;background:none;border:0;border-radius:0;padding:0;box-shadow:none}
[data-theme="dark"] #education .row>b{background:none;color:#F16913}
.project.dark,.business{color:var(--ink);background:linear-gradient(145deg,#f2f5f8,#d8dee4);border:1px solid var(--line);box-shadow:var(--shadow)}
.project.dark p,.business p{color:var(--muted)}.project.dark .tags b,.business .tags b{box-shadow:var(--in)}
.business .photo-slot{background:var(--bg);color:var(--muted);box-shadow:var(--in)}
[data-theme="dark"] .project.dark,[data-theme="dark"] .business{background:linear-gradient(145deg,#292e36,#1b1f24)}
.awards{border:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.award{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:28px;gap:18px;border:1px solid var(--line)}.award strong{font-family:var(--font-display);font-size:3rem}.award h3{font-size:1.2rem}
.actions .button,.socials a{transition:transform .23s ease,box-shadow .23s ease}.hero .portrait-panel img{transition:transform .4s ease;transform-origin:center}
@media(hover:hover) and (pointer:fine){.actions .button:hover,.socials a:hover{transform:translateY(-5px)}.hero .portrait-panel:hover{transform:none}.hero .portrait-panel:hover img{transform:scale(1.035)}}
#contact{min-height:calc(100svh - 130px);padding:90px 0 20px;display:flex;align-items:center}.contact{width:100%;padding:30px 45px}.contact h2{margin:0 0 22px}.contact-form{margin:22px auto 0}.contact-form label{margin-bottom:12px;gap:5px}.contact-form input,.contact-form textarea{padding:10px 13px}.contact-form textarea{height:110px;min-height:80px}.contact-form .form-note{margin-top:10px}.contact>div a{padding:9px 15px}.contact #contactStatus:empty{display:none}footer{padding:16px 0 22px}
@media(min-width:901px) and (max-width:1100px){.nav-shell nav a{padding:8px 5px;font-size:.75rem}.nav-shell{gap:6px}.nav-shell .pill{padding:0 11px}}
@media(max-width:900px){.awards{grid-template-columns:1fr}.hero h1{font-size:clamp(2.4rem,5.1vw,3.4rem)}}
@media(max-width:620px){
 .hero{gap:10px;padding-top:82px;padding-bottom:90px}
 .hero .portrait{order:0;height:clamp(150px,calc(100svh - 410px),360px)}
 .hero h1{order:1;font-size:clamp(2rem,9vw,3.2rem);align-self:center;text-align:center}
 .hero .eyebrow{order:2;align-self:center;text-align:center}
 .hero-copy>p{order:3;text-align:center;max-width:36ch}
 .hero .actions{order:4;grid-template-columns:1fr 1fr}
 .hero .actions .button{width:100%;font-size:.875rem;padding:0 9px}
 .hero .socials{order:5;justify-content:center}
 .heading h2{font-size:clamp(1.65rem,6.6vw,2.5rem);white-space:normal}
 .business h2{font-size:4rem}
 #contact{min-height:calc(100svh - 90px);padding:82px 0 14px}
 .contact{padding:23px 18px}.contact h2{font-size:clamp(1.6rem,6.8vw,2.4rem);margin-bottom:16px}
 .contact>div{gap:9px}.contact>div a{padding:8px;font-size:.8rem}
 .contact-form{margin-top:17px}.contact-form label{font-size:.875rem;margin-bottom:10px}
 .contact-form input{padding:9px 12px}.contact-form textarea{height:90px}
 .contact-form .button{min-height:44px}.form-note{font-size:.75rem;line-height:1.4}
}
@media(prefers-reduced-motion:reduce){.actions .button:hover,.socials a:hover,.hero .portrait-panel:hover img{transform:none}.hero .portrait-panel img{transition:none}}
@media(max-width:620px){
 .hero{min-height:0;padding-top:88px;padding-bottom:38px;gap:18px}
 .hero .portrait{width:100%;max-width:440px;height:auto;aspect-ratio:3/4}
 .hero .portrait-panel{height:auto;aspect-ratio:3/4}
 .hero .portrait-panel img{height:auto;width:100%}
 .mobile{transition:opacity .3s ease,transform .3s ease}
 .mobile.scroll-hidden:not(:focus-within){opacity:0;transform:translateY(18px);pointer-events:none}
}
.hero h1{color:#F16913}
.skill-level{margin-top:24px}.skill-level>div:first-child{display:flex;justify-content:space-between;gap:12px;font-size:.875rem}.skill-level b{color:#F16913}.skill-track{height:9px;overflow:hidden;border-radius:12px;box-shadow:var(--in);margin-top:10px}.skill-track>span{display:block;width:var(--level);height:100%;background:#F16913;border-radius:inherit;transform:scaleX(0);transform-origin:left;transition:transform 1.1s ease}.skills .visible .skill-track>span{transform:scaleX(1)}.contact-invite{margin:22px 0 0;color:var(--muted)}
@media(prefers-reduced-motion:reduce){.skill-track>span{transition:none;transform:none}}
#sentDialog{max-width:min(90vw,440px);padding:32px;border-radius:24px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}#sentDialog::backdrop{background:#0009;backdrop-filter:blur(5px)}#sentTitle{color:#F16913}.button:disabled{opacity:.65;cursor:wait}
.hero h1{color:var(--ink)}.hero h1 .name-dot{color:#F16913}
.nav-shell nav{position:relative;isolation:isolate}
.nav-highlight{position:absolute;left:0;top:0;border-radius:12px;box-shadow:var(--in);pointer-events:none;z-index:-1;transition:transform .4s cubic-bezier(.22,1,.36,1),width .4s ease,height .4s ease,opacity .2s ease;opacity:0}
.nav-shell nav a.active,.mobile a.active{box-shadow:none}
@media(max-width:620px){
 .mobile{isolation:isolate}
 .mobile a,.mobile a[href]{display:flex;width:52px;height:50px;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;font-size:.75rem;line-height:1}
 .mobile a:before,.mobile a:after{display:none!important}
 .mobile a svg{width:21px;height:21px}.mobile a span{font-size:.75rem;font-weight:600}
 .hero{padding-top:84px;gap:12px}
 .hero .portrait{width:auto;height:clamp(150px,calc(100svh - 270px),430px);max-width:100%;aspect-ratio:3/4}
 .hero .portrait-panel,.hero .portrait-panel img{height:100%;width:100%;object-fit:contain}
 .hero h1{font-size:clamp(1.7rem,8.4vw,3rem)}
 .hero .eyebrow{font-size:.75rem;line-height:1.4}
 .section:not(.hero){padding-top:54px;padding-bottom:24px}
 .heading{margin-bottom:22px}
 .card,.row,.project,.business,.contact{border-radius:19px}
 .card,.feature,.copy,.skills .card,.travel-card,.award{padding:19px}
 .grid,.projects,.about-grid,.awards,.travel{gap:17px}
 .feature h3{margin:16px 0 8px;font-size:1.2rem}.feature p,.copy p,.project p,.travel-card p{line-height:1.5}
 .stats{gap:12px}.stats .card{min-height:94px;padding:15px}.stats strong{font-size:2rem}
 .row{gap:10px;padding:15px}.row h3{font-size:1rem}.row p{font-size:.875rem}
 .project{padding:19px;gap:18px}.project .photo-slot{aspect-ratio:16/9}.project h3{margin-bottom:11px}
 .tags{gap:6px}.tags b{font-size:.75rem;padding:6px 9px}
 .award{gap:10px}.award strong{font-size:2.3rem}
 .skill-level{margin-top:18px}
 .business{padding:24px;gap:22px}.business h2{font-size:3.2rem}
 .travel-card h3{font-size:1.25rem;margin-bottom:14px}.travel-photos{gap:10px}.travel-photos .photo-slot{aspect-ratio:1}
 .photo-slot{font-size:.75rem;border-radius:12px}
 .contact{padding:22px 17px}
}
@media(prefers-reduced-motion:reduce){.nav-highlight{transition:none}}
@media(max-width:620px){
 .mobile{height:56px;padding:5px;border-radius:18px}
 .mobile a,.mobile a[href]{height:44px;gap:3px}
 .mobile a svg{width:18px;height:18px}
 .section,footer{width:calc(100% - 44px)}
 .section:not(.hero){padding-top:46px;padding-bottom:22px}
 .heading{margin-bottom:20px}.heading h2{font-size:clamp(1.55rem,6.2vw,2.15rem)}
 .card,.feature,.copy,.skills .card,.travel-card,.award{padding:17px}
 .grid,.projects,.about-grid,.awards,.travel{gap:14px}
 .project{padding:17px;gap:15px}
 .business{padding:20px;gap:20px}
 .copy .lead{font-size:1.12rem;line-height:1.5}
 .stats .card{min-height:86px;padding:13px}.stats strong{font-size:1.8rem}
 .skill-level{margin-top:16px}
 #experience .grid{gap:13px}
 #experience .feature{padding:19px 18px;min-height:0;background:var(--bg);box-shadow:3px 3px 9px #c5ccd4,-3px -3px 9px #fff;border:1px solid rgba(255,255,255,.55);border-radius:16px}
 #experience .feature small{display:block;font-size:.75rem;line-height:1.45;letter-spacing:.055em}
 #experience .feature h3{font-size:1.08rem;line-height:1.3;margin:9px 0 8px}
 #experience .feature p{font-size:1rem;line-height:1.5;margin:0;color:var(--muted)}
 [data-theme="dark"] #experience .feature{background:var(--bg);border-color:#343a43;box-shadow:3px 3px 9px #16191e,-3px -3px 9px #2a3038}
 .hero h1{font-size:clamp(1.65rem,8vw,2.8rem)}
 .hero .portrait{max-width:100%;height:min(430px,calc(100svh - 260px),calc((100vw - 44px)*1.3333));min-height:0}
 .contact{padding:20px 16px}
}
#resumeDialog{width:min(760px,calc(100vw - 28px));max-width:760px;max-height:90svh;padding:0;overflow:hidden}
#resumeDialog[open]{display:flex;flex-direction:column}
.resume-header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;flex-shrink:0}.resume-header h2{margin:0;font-size:1.3rem}
.resume-close{width:44px;height:44px;border:0;background:none;color:#888;font-size:30px;cursor:pointer}
.resume-preview{overflow:auto;min-height:0;background:#fff}.resume-preview img{display:block;width:100%;height:auto}
.resume-footer{padding:15px;text-align:center;flex-shrink:0}.resume-download{background:#F16913;color:#18202a}
@media(max-width:620px){.hero h1{margin-top:16px}.hero .portrait{height:min(414px,calc(100svh - 282px),calc((100vw - 44px)*1.3333))}}


/* HOME PORTRAIT — ONE IMAGE, ROUNDED LOWER FRAME */
.hero .portrait {
  position: relative;
  top: -16px;
  width: min(100%, 360px);
  max-width: 360px;
  height: auto;
  min-height: 0;
  aspect-ratio: 1085 / 1450;
  justify-self: center;
  align-self: center;
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
  overflow: visible;
}

.hero .single-popout {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1085 / 1450;
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  overflow: visible;
  transition: transform .35s ease;
}

/* No duplicate photo or decorative outline. */
.hero .portrait::before,
.hero .portrait::after,
.hero .single-popout::before,
.hero .single-popout::after {
  content: none;
  display: none;
}

/* The mask only shapes the outside edges; it never splits the neck. */
.hero .single-popout > img {
  position: static;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  clip-path: none;
  transform: none;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201085%201450%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20x%3D%220%22%20y%3D%22471%22%20width%3D%221085%22%20height%3D%22979%22%20rx%3D%2272%22%20fill%3D%22white%22%2F%3E%3Crect%20x%3D%2272%22%20y%3D%220%22%20width%3D%22941%22%20height%3D%22600%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201085%201450%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20x%3D%220%22%20y%3D%22471%22%20width%3D%221085%22%20height%3D%22979%22%20rx%3D%2272%22%20fill%3D%22white%22%2F%3E%3Crect%20x%3D%2272%22%20y%3D%220%22%20width%3D%22941%22%20height%3D%22600%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

@media (hover: hover) and (pointer: fine) {
  .hero .single-popout:hover { transform: scale(1.025); }
}

@media (max-width: 620px) {
  .hero .portrait {
    top: -8px;
    width: min(100%, 280px, max(180px, calc((100svh - 290px) * .748276)));
    max-width: 280px;
    height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero .single-popout { transition: none; }
  .hero .single-popout:hover { transform: none; }
}


/* PC ONLY — portrait size and position */
@media (min-width: 1024px) {
  .hero .portrait {
    width: min(100%, 430px);
    max-width: 430px;
    height: auto;
    aspect-ratio: 1085 / 1450;
    position: relative;
    top: -40px;
    left: -18px;
    justify-self: center;
    align-self: center;
  }

  .hero .single-popout {
    width: 100%;
    height: auto;
  }

  .hero .single-popout > img {
    width: 100%;
    height: auto;
    display: block;
  }
}


/* Keep the website's selected theme */
:root:not([data-theme="dark"]) {
  color-scheme: only light;
}

:root[data-theme="dark"] {
  color-scheme: only dark;
}


/* LARGE DESKTOP — responsive content sizing */
@media (min-width: 1441px) {
  :root {
    --desktop-width: clamp(1180px, 82vw, 2100px);
  }

  /* Scale rem-based text gradually */
  html {
    font-size: clamp(16px, 1.1111vw, 24px);
    scroll-padding-top: 140px;
  }

  body {
    font-size: 1rem;
  }

  /* Main content, navigation and footer */
  .section,
  .nav-shell,
  body > footer {
    width: var(--desktop-width);
    max-width: calc(100% - 64px);
  }

  .section {
    padding-block: clamp(110px, 7.64vw, 180px);
  }

  /* Desktop navigation */
  .nav-shell {
    top: clamp(18px, 1.25vw, 30px);
    height: clamp(64px, 4.45vw, 96px);
    padding: 0.5rem 0.75rem 0.5rem 1.25rem;
    gap: 0.75rem;
    border-radius: 1.4rem;
  }

  .nav-shell nav {
    gap: 0.2rem;
  }

  .nav-shell nav a {
    padding: 0.55rem;
    font-size: 0.8rem;
  }

  .nav-shell .pill,
  .actions .button {
    min-height: 3rem;
    padding-inline: 1.25rem;
    font-size: 1rem;
    border-radius: 0.95rem;
  }

  .nav-shell .theme-switch {
    width: 3rem;
    height: 3rem;
    flex: 0 0 3rem;
    font-size: 1.25rem;
    border-radius: 0.95rem;
  }

  /* Homepage layout */
  .hero.section {
    height: auto;
    min-height: 100svh;
    padding-top: clamp(125px, 8.7vw, 200px);
    padding-bottom: clamp(70px, 5vw, 120px);
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(70px, 5vw, 128px);
    align-items: center;
  }

  .hero-copy {
    min-width: 0;
  }

  .hero h1 {
    font-size: clamp(75px, 4.7vw, 120px);
    margin: 1.5rem 0 1.75rem;
  }

  .hero .eyebrow {
    font-size: 0.8rem;
  }

  .hero-copy > p {
    max-width: 36rem;
    font-size: 1.1rem;
    line-height: 1.65;
  }

  .hero .actions {
    gap: 0.9rem;
    margin-block: 2rem;
  }

  .hero .socials {
    gap: 1.1rem;
  }

  .hero .socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
  }

  .hero .socials a svg {
    width: 1.3rem;
    height: 1.3rem;
  }

  /* Portrait grows with width, but respects screen height */
  .hero .portrait {
    width: min(
      100%,
      clamp(430px, 30vw, 760px),
      max(360px, calc((100svh - 230px) * 0.748276))
    );
    max-width: none;
    height: auto;
    min-height: 0;
    aspect-ratio: 1085 / 1450;
    top: -2rem;
    left: -1rem;
  }

  .hero .single-popout,
  .hero .single-popout > img {
    width: 100%;
    height: auto;
  }

  /* Section spacing and cards */
  .heading {
    margin-bottom: 3rem;
  }

  .grid,
  .projects,
  .about-grid,
  .awards {
    gap: 1.75rem;
  }

  .copy {
    padding: 2.6rem;
  }

  .feature,
  .award,
  .skills .card {
    padding: 1.9rem;
  }

  .row {
    padding: 1.4rem 1.75rem;
    gap: 1.5rem;
    grid-template-columns: 4.4rem minmax(0, 1fr) auto;
  }

  .row i {
    width: 3rem;
    height: 3rem;
  }

  .project {
    padding: 2.4rem;
    min-height: 31rem;
  }

  .stats .card {
    padding: 1.6rem;
    min-height: 9rem;
  }

  .tags {
    gap: 0.5rem;
  }

  .tags b {
    padding: 0.45rem 0.7rem;
  }

  .business {
    padding: 4rem;
    gap: 4rem;
  }

  .travel-card {
    padding: 1.75rem;
  }

  /* Contact form */
  .contact {
    padding: 2rem 3rem;
  }

  .contact-form input,
  .contact-form textarea,
  .contact-form .button {
    font-size: 1rem;
  }

  .contact-form input,
  .contact-form textarea {
    padding: 0.65rem 0.85rem;
  }

  .contact-form textarea {
    height: 7rem;
  }

  .contact > div a {
    padding: 0.6rem 1rem;
  }
}


/* Mobile bottom bar: remove outer glow */
@media (max-width: 620px) {
  #mobile {
    box-shadow: none;
    border: 1px solid var(--line);
  }
}