/* DC Portfolio — Hero header styles */
:root{--accent:#0a66c2;--white:#ffffff;--muted:#9aa0a6}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:sofia-pro, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;color:#111}
.container{max-width:1200px;margin:0 auto;padding:0 1rem}
.hero-inner.container,.about-inner.container{padding-right:0}

/* Header */
/* Keep header visually empty so hero background sits flush at top; logo/nav live inside the hero stack */
.site-header{height:0}
.logo-img{height:40px;display:block}

/* Sticky nav */
.sticky-nav{position:fixed;top:0;left:0;right:0;z-index:1200;background-image:url('Website Assets/DC-Web-Portfolio-sticky-nav-BG.png');background-size:cover;background-position:center;transform:translateY(-100%);opacity:0;pointer-events:none;transition:transform 0.24s ease,opacity 0.24s ease}
.sticky-nav.is-visible{transform:translateY(0);opacity:1;pointer-events:auto}
.sticky-nav-inner{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;column-gap:64px;padding:10px 0}
.sticky-nav-left,.sticky-nav-center,.sticky-nav-right{width:100%}
.sticky-nav-left{justify-self:start;display:flex;justify-content:flex-start}
.sticky-nav-center{justify-self:center;display:flex;justify-content:center}
.sticky-nav-right{justify-self:end;display:flex;justify-content:flex-end;white-space:nowrap}
.sticky-logo-img,.sticky-portfolio-word{width:190px;height:auto;display:block}
.sticky-nav .nav-link{font-size:26px;line-height:1;color:#e4eeed}
.sticky-nav .nav-link:not(:last-child)::after{content:"\00a0|\00a0"}

/* Navigation (Bebas Neue for links) */
.nav{display:flex;gap:0;align-items:center}
.nav-link{font-family:'bebas-neue', 'Bebas Neue', serif;letter-spacing:1px;color:#e4eeed;text-decoration:none;font-size:27px;font-weight:200;transition:color .2s ease}
.nav-link:hover,.nav-link:focus-visible{color:#1390a4}
.nav-link:not(:last-child)::after{content:"\00a0\00a0|\00a0\00a0";color:#1390a4;font-weight:200;margin:0;opacity:0.9}

/* Hero */
.hero{position:relative;display:flex;align-items:flex-end;width:100vw;margin-left:calc(-50vw + 50%);min-height:0;height:auto;aspect-ratio:2954 / 1000}
.hero-bg{position:absolute;top:0;left:0;right:0;bottom:0;background-image:url('Website Assets/hero-header-BG.png');background-repeat:no-repeat;background-size:100% auto;background-position:left center;width:100%;height:100%}
.hero-inner{position:relative;display:flex;align-items:flex-end;min-height:100%;height:100%;width:100%}
.hero-right{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:41px;padding:0 2rem 55px 0}
.hero-logo{height:174px}
.portfolio-word{max-width:446px;width:100%;height:auto;display:block}

/* Overlay for contrast (keeps header text white on top of BG) */
.hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.35),rgba(0,0,0,0.35));}

/* Make header elements visually on top */
.site-header, .hero-inner{position:relative;z-index:10}

/* About */
.about-section{background:#e4eeed;padding:48px 0 48px}
.about-inner{display:grid;grid-template-columns:max-content minmax(0, 1fr);gap:50px;align-items:end}
.about-image-wrap{display:flex;justify-content:flex-start;align-self:end}
.about-image{width:auto;max-width:100%;max-height:360px;height:auto;display:block}
.about-copy{color:#0d111f;text-align:left;font-size:18px;line-height:1.55;font-weight:300;padding-right:20px}
.about-copy p{margin:0 0 1.35rem}
.about-copy p:last-child{margin-bottom:0}
.about-copy strong{font-weight:700}

/* Responsive */
/* Resume */
.resume-section{background:#2d1080;padding:48px 0 48px}
.resume-inner{max-width:760px;text-align:center}
.resume-heading{font-family:'bebas-neue','Bebas Neue',serif;font-size:72px;font-weight:400;color:#e4eeed;margin:0;letter-spacing:2px;line-height:1}
.resume-underline{width:70px;height:6px;background:#1390a4;margin:20px auto 0}
.resume-entry{margin-top:27px}
.resume-entry--first .resume-role-main{font-family:sofia-pro,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial;font-size:24px;font-weight:700;color:#e4eeed;margin:0;letter-spacing:0.5px;text-transform:uppercase}
.resume-role-title{font-family:sofia-pro,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial;font-size:18px;font-weight:400;color:#e4eeed;margin:0;letter-spacing:0.5px;text-transform:uppercase}
.resume-company{font-family:sofia-pro,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial;font-size:24px;font-weight:700;color:#e4eeed;margin:4px 0 0;letter-spacing:0.5px;text-transform:uppercase}
.resume-dates{font-family:sofia-pro,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial;font-size:18px;font-weight:400;color:#e4eeed;margin:6px 0 0}
.resume-desc{font-size:18px;line-height:1.55;font-weight:300;color:#e4eeed;margin:16px 0 0}
.resume-divider{border:none;border-top:3px dotted #1390a4;margin:27px 0 0}

/* Work */
.work-section{background:#e4eeed;padding:48px 0}
.work-inner{text-align:center;padding-left:0;padding-right:0}
.work-heading{font-family:'bebas-neue','Bebas Neue',serif;font-size:72px;font-weight:400;color:#0d111f;margin:0;letter-spacing:2px;line-height:1}
.work-underline{width:70px;height:6px;background:#1390a4;margin:20px auto 48px}
.work-subsection-title{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:24px}
.work-subheading{font-family:sofia-pro,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial;font-size:24px;font-weight:700;color:#0d111f;margin:0;letter-spacing:0.5px;text-transform:uppercase;line-height:1}
.work-arrow{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;width:28px;height:28px;line-height:0;transform:translateY(2px);transition:opacity 0.2s}
.work-arrow:hover .chevron{border-top-color:#0d111f;border-right-color:#0d111f}
.chevron{display:block;width:10px;height:10px;border-top:2px solid #1390a4;border-right:2px solid #1390a4}
.chevron--left{transform:rotate(-135deg)}
.chevron--right{transform:rotate(45deg)}
.work-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:0}
.work-thumb{position:relative;overflow:hidden;cursor:pointer;aspect-ratio:1}
.work-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.25s ease}
.work-thumb:hover img{transform:scale(0.92)}
.work-thumb-overlay{position:absolute;inset:0;background:rgba(19,144,164,0.84);opacity:0;transition:opacity 0.25s ease;pointer-events:none}
.work-thumb:hover .work-thumb-overlay{opacity:1}
@media (min-width:901px){
  .work-section.is-parent-carousel .work-subsection{margin-top:0}
}

/* Work: Web Design piece */
.work-subsection--web{margin-top:48px}
.work-arrow[disabled]{opacity:0.35;cursor:default}
.web-carousel-wrapper{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;width:100%}
.web-monitor-stack{min-width:0;display:block;line-height:0;width:min(100%, 900px);justify-self:center}
.web-monitor-browser,.web-monitor-video,.web-monitor-base{display:block;width:100%;height:auto}
.web-video-stage{position:relative;display:block;line-height:0}
.web-monitor-video{background:#0d111f;border-left:3px solid #0d111f;border-right:3px solid #0d111f}
.web-video-fade{position:absolute;inset:0;background:#0d111f;opacity:0;pointer-events:none;transition:opacity 0.38s ease}
.web-video-fade.is-active{opacity:1}
.web-carousel-arrow{flex-shrink:0;background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;opacity:0.8;transition:opacity 0.2s}
.web-carousel-arrow:hover{opacity:1}
.web-carousel-arrow img{height:36px;display:block}

/* Work: Posters/Flyers piece */
.work-subsection--posters{margin-top:56px}
.poster-carousel-wrapper{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;width:100%}
.poster-carousel-stage{position:relative;width:100%;max-width:980px;height:540px;justify-self:center;overflow:hidden}
.poster-card{position:absolute;top:50%;left:50%;margin:0;line-height:0;transition:transform 0.46s ease,opacity 0.38s ease;will-change:transform,opacity}
.poster-card img{display:block;height:auto;object-fit:cover}
.poster-card--current{z-index:3;opacity:1;transform:translate(-50%,-50%) scale(1)}
.poster-card--current img{height:500px;max-height:500px;width:auto}
.poster-card--prev,.poster-card--next{z-index:2;opacity:0.88}
.poster-card--prev{transform:translate(-145%,-50%) scale(0.72)}
.poster-card--next{transform:translate(45%,-50%) scale(0.72)}
.poster-card--prev img,.poster-card--next img{width:clamp(180px, 26vw, 320px)}
.poster-card--prev::after,.poster-card--next::after{content:"";position:absolute;inset:0;pointer-events:none}
.poster-card--prev::after{background:linear-gradient(90deg,#e4eeed 0%,#e4eeed 50%,rgba(228,238,237,0)100%)}
.poster-card--next::after{background:linear-gradient(270deg,#e4eeed 0%,#e4eeed 50%,rgba(228,238,237,0)100%)}
.poster-carousel-stage.is-switching .poster-card{opacity:0.55}

/* Contact */
.contact-section{background-image:url('Website Assets/Contact-BG.png');background-size:cover;background-position:center;padding:72px 0 88px}
.contact-inner{text-align:center}
.contact-heading{font-family:'bebas-neue','Bebas Neue',serif;font-size:72px;font-weight:400;color:#0d111f;margin:0;letter-spacing:2px;line-height:1}
.contact-underline{width:70px;height:6px;background:#e4eeed;margin:20px auto 48px}
.contact-form{max-width:760px;margin:0 auto}
.contact-field{background:rgba(228,238,237,0.25);border:2px solid #0d111f;transition:background-color 0.2s}
.contact-field:hover{background:rgba(228,238,237,0.15)}
.contact-field + .contact-field{margin-top:10px}
.contact-field--split{display:grid;grid-template-columns:minmax(0,1fr) 250px;align-items:center;gap:18px;padding:10px 18px}
.contact-field--message{padding:12px 18px;margin-top:10px}
.contact-label{font-family:sofia-pro,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial;font-size:18px;line-height:1.55;font-weight:300;color:#0d111f;text-align:left}
.contact-input{width:100%;border:none;background:transparent;font-family:sofia-pro,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial;font-size:18px;line-height:1.55;font-weight:200;color:rgba(13,17,31,1);padding:0;outline:none;text-align:right}
.contact-input::placeholder{color:rgba(13,17,31,0.5);font-weight:300}
.contact-message{display:block;text-align:left;min-height:220px;resize:vertical}
.contact-submit{margin-top:28px;background:#0d111f;color:#e4eeed;border:none;cursor:pointer;padding:7px 29px;font-family:'bebas-neue','Bebas Neue',serif;font-size:34px;line-height:1;letter-spacing:1px;transition:background-color 0.2s,color 0.2s}
.contact-submit:hover{background:#e4eeed;color:#0d111f}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.contact-confirm{position:fixed;inset:0;z-index:1300;display:flex;align-items:center;justify-content:center}
.contact-confirm[hidden]{display:none}
.contact-confirm-backdrop{position:absolute;inset:0;background:rgba(13,17,31,0.5)}
.contact-confirm-card{position:relative;z-index:1;min-width:280px;max-width:88vw;background:#e4eeed;border:2px solid #0d111f;padding:20px 24px;text-align:center}
.contact-confirm-text{margin:0;color:#0d111f;font-size:18px;line-height:1.4;font-weight:300}
.contact-confirm-close{margin-top:16px;background:#0d111f;color:#e4eeed;border:none;cursor:pointer;padding:8px 18px;font-family:'bebas-neue','Bebas Neue',serif;font-size:26px;line-height:1;letter-spacing:1px}
.contact-confirm-close:hover{background:#e4eeed;color:#0d111f;outline:2px solid #0d111f}

/* Work modal */
.work-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center}
.work-modal[hidden]{display:none}
.work-modal-backdrop{position:absolute;inset:0;background:rgba(13,17,31,0.84)}
.work-modal-content{position:relative;z-index:1;border:10px solid #e4eeed;max-width:90vw;max-height:90vh;display:flex;align-items:center;justify-content:center;background:#000}
.work-modal-img{display:block;max-width:100%;max-height:80vh;object-fit:contain}
.work-modal-video{display:none;max-width:100%;max-height:80vh;object-fit:contain;background:#000}
.work-modal-close{position:absolute;top:-44px;right:-10px;background:none;border:none;color:#e4eeed;font-size:36px;cursor:pointer;line-height:1;padding:0;font-weight:300}
.work-modal-close:hover{color:#1390a4}
.work-modal-prev,.work-modal-next{position:absolute;top:50%;transform:translateY(-50%);background:none;border:none;color:#e4eeed;font-size:52px;cursor:pointer;line-height:1;padding:0 10px;font-weight:300;transition:color 0.2s}
.work-modal-prev{left:-44px}
.work-modal-next{right:-44px}
.work-modal-prev:hover,.work-modal-next:hover{color:#1390a4}

@media (max-width:1350px){
  .hero{align-items:center}
  .hero-inner{
    --hero-pad-y:clamp(20px, calc(100vw * 0.02963), 40px);
    --hero-available-h:calc((100vw / 2.954) - (var(--hero-pad-y) * 2));
    --hero-scale:clamp(0.26, calc(var(--hero-available-h) / 338px), 1);
    align-items:center;
    padding:var(--hero-pad-y) 0;
    box-sizing:border-box;
  }
  .hero-right{gap:calc(41px * var(--hero-scale));padding:0 clamp(8px, 1.5vw, 32px) 0 0}
  .hero-logo{height:calc(174px * var(--hero-scale))}
  .portfolio-word{width:calc(446px * var(--hero-scale));max-width:none}
  .nav-link{font-size:calc(27px * var(--hero-scale));line-height:1}
  .about-inner{align-items:center}
  .about-image-wrap{align-self:center}
}
@media (max-width:1000px){
  .hero-inner{padding:var(--hero-pad-y) 0}
}
@media (max-width:900px){
  .logo-img{height:36px}
  .hero-logo{width:calc(446px * var(--hero-scale));height:auto;max-width:none}
  .about-inner{grid-template-columns:300px minmax(0,1fr);gap:36px}
  .about-copy{font-size:16px}
  .sticky-nav{display:none}
}
@media (max-width:900px){
  .work-grid{grid-template-columns:repeat(3,1fr)}
  .web-carousel-wrapper{grid-template-columns:1fr 1fr;padding:0 30px;row-gap:20px;column-gap:0}
  .web-monitor-stack{grid-row:1;grid-column:1/-1;width:100%;max-width:100%}
  .web-carousel-prev{grid-row:2;grid-column:1/-1;justify-self:center;transform:translateX(-48px)}
  .web-carousel-next{grid-row:2;grid-column:1/-1;justify-self:center;transform:translateX(48px)}
  .poster-carousel-wrapper{grid-template-columns:1fr 1fr;padding:0 30px;row-gap:20px;column-gap:0}
  .poster-carousel-stage{grid-row:1;grid-column:1/-1;max-width:100%;height:500px}
  .poster-carousel-prev{grid-row:2;grid-column:1/-1;justify-self:center;transform:translateX(-48px)}
  .poster-carousel-next{grid-row:2;grid-column:1/-1;justify-self:center;transform:translateX(48px)}
  .poster-card--current img{height:460px;max-height:460px}
  .poster-card--prev{transform:translate(-138%,-50%) scale(0.68)}
  .poster-card--next{transform:translate(38%,-50%) scale(0.68)}
  .contact-form{max-width:100%}
  .contact-field--split{grid-template-columns:minmax(0,1fr) 210px}
}
@media (max-width:768px){
  .about-section{padding:24px 0 64px}
  .about-inner{grid-template-columns:1fr;gap:32px}
  .about-image{max-width:340px;max-height:150px}
  .work-grid{grid-template-columns:repeat(2,1fr)}
  .work-subsection--web{margin-top:40px}
  .contact-heading{font-size:58px}
  .contact-underline{margin-bottom:34px}
  .contact-field--split{grid-template-columns:1fr;gap:8px}
  .contact-input{text-align:left}
  .contact-message{min-height:190px}
}
@media (max-width:640px){
  .nav{display:flex;gap:0;flex-wrap:nowrap;justify-content:flex-end}
  .nav-link:not(:last-child)::after{margin:0}
  .about-section{padding:12px 0 52px}
  .about-copy{font-size:14px;line-height:1.5}
}
@media (max-width:480px){
  .work-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:500px){
  .hero{width:100%;margin-left:0;min-height:0;height:auto;aspect-ratio:2954 / 1000}
  .hero-bg{background-position:left center;background-size:100% auto}
  .nav{gap:0}
  .nav-link:not(:last-child)::after{margin:0}
  .about-section{padding:0 0 40px}
  .about-image{max-width:260px;max-height:150px;margin-top:20px}
  .about-copy{font-size:13px}
}