@font-face{
  font-family:'Cormorant Upright';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('./assets/cormorant-upright-400.ttf') format('truetype')
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('./assets/montserrat-400.ttf') format('truetype')
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('./assets/montserrat-600.ttf') format('truetype')
}
:root{
  color-scheme:dark;
  --background:#000;
  --text:#fff;
  --border:#572525;
  --border-highlight:#bd5151;
  --card-border:linear-gradient(90deg,var(--border),var(--border-highlight) 50%,var(--border));
  --red-start:#9d0000;
  --red-end:#2d0000;
  --body-font:'Montserrat',Arial,sans-serif;
  --heading-font:'Cormorant Upright',Georgia,serif;
  --u:min(1px,0.0694444444vw)
}
*{
  box-sizing:border-box
}
html{
  background:var(--background);
  scroll-padding-top:110px
}
body{
  margin:0;
  color:var(--text);
  font-family:var(--body-font);
  font-weight:400
}
a{
  color:inherit;
  text-decoration:none
}
a:focus-visible{
  outline:3px solid white;
  outline-offset:6px
}
a:hover{
  text-decoration:underline
}
img{
  max-width:100%;
  display:block
}
h1,h2,h3,p{
  margin:0
}
h1,h2,h3{
  font-family:var(--heading-font);
  font-weight:400
}
h2{
  font-size:calc(64 * var(--u));
  line-height:1.22
}
.site{
  max-width:1440px;
  margin-inline:auto;
  min-height:100vh;
  display:flex;
  flex-direction:column
}
.site>main{
  flex:1
}
.site-header{
  transition:transform .18s ease;
  position:sticky;
  top:0;
  z-index:100;
  background:var(--background);
  flex-shrink:0;
  min-height:calc(89 * var(--u));
  padding:calc(19 * var(--u)) calc(34 * var(--u)) calc(22 * var(--u));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  font-size:calc(32 * var(--u));
  line-height:1.5
}
.site-header--hidden:not(:focus-within){
  transform:translateY(-100%);
  pointer-events:none
}
.site-header nav{
  display:flex;
  gap:calc(41 * var(--u))
}
.site-header a{
  white-space:nowrap
}
.site-header [aria-current=page]{
  font-weight:600
}
.hero{
  height:calc(729 * var(--u));
  position:relative;
  isolation:isolate
}
.portrait{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 46%;
  z-index:-3
}
.hero-shade{
  position:absolute;
  inset:50% 0 0;
  background:linear-gradient(178deg,transparent 2%,#000 82%);
  z-index:-2
}
.hero h1{
  position:absolute;
  top:calc(436 * var(--u));
  left:0;
  width:100%;
  text-align:center;
  font-size:calc(200 * var(--u));
  line-height:1.21;
  text-shadow:0 4px 7px #0004;
  z-index:1
}
.role-ribbon{
  position:absolute;
  bottom:0;
  width:100%;
  height:calc(94 * var(--u));
  background:linear-gradient(94.11deg,var(--red-start),var(--red-end));
  box-shadow:4px 4px 4px 12px #0004;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding-right:calc(240 * var(--u));
  font-family:var(--heading-font);
  font-size:calc(64 * var(--u));
  line-height:1.22
}
.content{
  width:85.28%;
  margin-inline:auto
}
.intro{
  padding:calc(98 * var(--u)) calc(27 * var(--u)) calc(73 * var(--u));
  border-bottom:calc(3 * var(--u)) solid #aaa
}
.intro h2{
  margin-bottom:calc(26 * var(--u))
}
.intro p{
  max-width:calc(1065 * var(--u));
  font-size:calc(40 * var(--u));
  line-height:1.225;
  letter-spacing:-.05em
}
.intro p+p{
  margin-top:calc(49 * var(--u))
}
.featured{
  padding-top:calc(70 * var(--u));
  padding-bottom:calc(171 * var(--u));
  border-bottom:calc(3 * var(--u)) solid #aaa
}
.featured>h2,.other>h2{
  margin-left:calc(24 * var(--u));
  margin-bottom:calc(73 * var(--u))
}
.featured-list{
  display:grid;
  gap:calc(171 * var(--u))
}
.featured-project{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
  position:relative;
  min-height:calc(859 * var(--u))
}
.project-panel{
  grid-column:1 / 3;
  grid-row:1;
  min-height:calc(859 * var(--u));
  border:calc(7 * var(--u)) solid transparent;
  background:linear-gradient(#000,#000) padding-box,linear-gradient(90deg,var(--border-highlight),var(--border)) border-box;
  border-radius:calc(10 * var(--u));
  padding:calc(24 * var(--u)) calc(98 * var(--u)) calc(46 * var(--u)) calc(46 * var(--u));
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:calc(32 * var(--u))
}
.project-copy h3{
  font-size:calc(64 * var(--u));
  line-height:1.22;
  padding-bottom:calc(10 * var(--u));
  border-bottom:calc(3 * var(--u)) solid #aaa;
  white-space:nowrap
}
.project-copy{
  font-size:calc(32 * var(--u));
  line-height:1.22
}
.description{
  padding:calc(15 * var(--u)) 0;
  border-bottom:calc(3 * var(--u)) solid #aaa
}
.contributions{
  padding-top:calc(15 * var(--u))
}
.contributions ul{
  margin:0;
  padding-left:calc(46 * var(--u))
}
.read-more{
  display:block;
  text-align:center;
  background:linear-gradient(90deg,#930101 -19.35%,#2d0000 119.34%);
  border-radius:calc(10 * var(--u));
  font-size:calc(40 * var(--u));
  line-height:1.22;
  padding:calc(12 * var(--u)) 10px;
  transition:filter .15s
}
.read-more:hover{
  filter:brightness(1.3);
  text-decoration:none
}
.project-media{
  grid-column:3;
  grid-row:1;
  position:relative;
  padding-top:calc(89 * var(--u));
  margin-left:calc(-85 * var(--u));
  width:calc(100% + 85 * var(--u))
}
.video,.video-placeholder{
  width:100%;
  aspect-ratio:480 / 296;
  border:calc(7 * var(--u)) solid var(--border);
  border-radius:calc(6 * var(--u));
  background:#d9d9d9;
  overflow:hidden
}
.video iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:#000
}
img.video-placeholder{
  object-fit:cover
}
.stats{
  list-style:none;
  padding:0;
  margin:calc(55 * var(--u)) 0 0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  row-gap:calc(32 * var(--u));
  width:calc(404 * var(--u));
  font-size:calc(40 * var(--u));
  line-height:1.225
}
.stats li{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:calc(9 * var(--u));
  text-align:center;
  min-width:0
}
.icon{
  width:calc(90 * var(--u));
  height:calc(90 * var(--u));
  object-fit:contain;
  flex-shrink:0
}
.featured-project--reverse .project-panel{
  grid-column:2 / 4;
  padding-right:calc(46 * var(--u));
  padding-left:calc(98 * var(--u))
}
.featured-project--reverse .project-media{
  grid-column:1;
  margin-left:0;
  margin-right:calc(-85 * var(--u))
}
.featured-project--reverse .stats{
  margin-left:0;
  margin-right:auto
}
.other{
  padding-top:calc(104 * var(--u));
  padding-bottom:calc(176 * var(--u))
}
.other>h2{
  margin-bottom:calc(96 * var(--u))
}
.other-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:calc(80 * var(--u)) calc(20 * var(--u))
}
.small-project{
  border:calc(7 * var(--u)) solid transparent;
  background:linear-gradient(#000,#000) padding-box,var(--card-border) border-box;
  border-radius:calc(10 * var(--u));
  padding:calc(16 * var(--u)) calc(26 * var(--u));
  min-height:calc(592 * var(--u));
  display:flex;
  flex-direction:column;
  gap:calc(10 * var(--u))
}
.small-project h3{
  font-size:calc(40 * var(--u));
  line-height:1.2
}
.project-thumbnail{
  width:100%;
  aspect-ratio:332/168;
  background:#d9d9d9;
  border-radius:calc(10 * var(--u));
  object-fit:cover
}
.project-thumbnail[data-image-position="top"]{
  object-position:center top
}
.small-project>p{
  font-size:calc(24 * var(--u));
  line-height:1.21;
  min-height:calc(155 * var(--u))
}
.small-project .stats{
  width:100%;
  font-size:calc(24 * var(--u));
  margin-top:auto;
  gap:15px
}
.small-project .stats li{
  gap:calc(9 * var(--u))
}
.empty-page{
  min-height:0
}
/* V1.1 Skills cards and shared contact footer. */
.skills{
  border-top:calc(3 * var(--u)) solid #aaa;
  padding:calc(65 * var(--u)) 0 calc(177 * var(--u))
}
.skills>h2{
  margin-left:calc(24 * var(--u));
  margin-bottom:calc(87 * var(--u))
}
.skills-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:calc(18 * var(--u))
}
.skill-card{
  min-width:0;
  min-height:calc(455 * var(--u));
  border:calc(7 * var(--u)) solid transparent;
  border-radius:calc(10 * var(--u));
  background:linear-gradient(#000,#000) padding-box,var(--card-border) border-box;
  padding:calc(14 * var(--u)) calc(25 * var(--u)) calc(30 * var(--u))
}
.skill-card h3{
  font-size:calc(40 * var(--u));
  line-height:1.2;
  padding-bottom:calc(17 * var(--u));
  border-bottom:calc(2 * var(--u)) solid #fff
}
.skill-card ul{
  list-style:none;
  padding:0;
  margin:calc(17 * var(--u)) 0 0;
  display:grid;
  gap:calc(15 * var(--u));
  font-size:calc(24 * var(--u));
  line-height:1.21
}
.site-footer{
  padding-bottom:calc(30 * var(--u))
}
.contact-bar{
  background:linear-gradient(94.11deg,var(--red-start),var(--red-end));
  min-height:calc(86 * var(--u));
  display:flex;
  align-items:center;
  padding-inline:calc(241 * var(--u))
}
.contact-links{
  width:66.46%;
  margin:calc(30 * var(--u)) auto 0;
  display:flex;
  justify-content:space-between;
  gap:24px
}
.contact-links a{
  display:flex;
  align-items:center;
  gap:calc(22 * var(--u));
  font-size:calc(36 * var(--u));
  line-height:1.22
}
.contact-links span{
  overflow-wrap:anywhere
}
.not-found{
  padding:80px 7%
}
.not-found h1{
  font-size:48px;
  margin-bottom:24px
}
.not-found a{
  text-decoration:underline
}
.sr-only,.skip-link:not(:focus){
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.skip-link:focus{
  position:fixed;
  top:12px;
  left:12px;
  background:#760000;
  padding:12px;
  z-index:101
}
/* About me: flowing rows reproduce the overlapping desktop composition. */
.about-heading{
  height:calc(349 * var(--u));
  position:relative;
  isolation:isolate
}
.about-heading h1{
  position:relative;
  z-index:1;
  padding-top:calc(60 * var(--u));
  text-align:center;
  font-size:calc(200 * var(--u));
  line-height:1.21;
  text-shadow:0 4px 7px #0004
}
.about-stories{
  padding-top:calc(103 * var(--u));
  padding-bottom:calc(176 * var(--u))
}
.about-story{
  display:grid;
  grid-template-columns:minmax(0,786fr) minmax(0,442fr);
  align-items:start
}
.about-copy{
  grid-column:1;
  grid-row:1;
  margin-top:calc(152 * var(--u));
  padding:calc(31 * var(--u)) calc(53 * var(--u));
  border:calc(7 * var(--u)) solid transparent;
  border-radius:calc(10 * var(--u));
  background:linear-gradient(#000,#000) padding-box,linear-gradient(90deg,var(--border-highlight),var(--border)) border-box;
  font-size:calc(32 * var(--u));
  line-height:1.21875
}
.about-photo{
  grid-column:2;
  grid-row:1;
  position:relative;
  width:calc(100% + 16 * var(--u));
  max-width:none;
  height:auto;
  margin-left:calc(-16 * var(--u));
  border:calc(7 * var(--u)) solid #2d0000;
  border-radius:calc(10 * var(--u));
  aspect-ratio:457/610;
  object-fit:cover
}
.about-copy p{
  max-width:calc(653 * var(--u))
}
.about-story--reverse .about-copy p{
  margin-left:auto
}
.about-story--reverse{
  grid-template-columns:minmax(0,465fr) minmax(0,763fr);
  margin-top:calc(-48 * var(--u))
}
.about-story--reverse .about-copy{
  grid-column:2;
  margin-top:calc(114 * var(--u));
  margin-left:calc(-24 * var(--u))
}
.about-story--reverse .about-photo{
  grid-column:1;
  margin-left:0;
  width:100%;
  aspect-ratio:465/620
}
.about-story:nth-child(3){
  margin-top:calc(-52 * var(--u))
}
.about-story:nth-child(3) .about-copy{
  margin-top:calc(228 * var(--u))
}
/* Project detail pages share this responsive case-study layout. */
.case-hero .portrait{
  height:calc(678 * var(--u));
  object-position:center
}
.case-trailer{
  width:86.81%;
  margin:calc(84 * var(--u)) auto 0
}
.case-trailer .video{
  aspect-ratio:1066/663.29;
  border-radius:calc(10 * var(--u))
}
.case-action{
  width:54.23%;
  margin:calc(84 * var(--u)) auto;
  min-height:calc(79 * var(--u))
}
.case-overview{
  display:grid;
  grid-template-columns:minmax(0,767fr) minmax(0,362fr);
  gap:calc(98 * var(--u));
  align-items:center;
  border-block:calc(3 * var(--u)) solid #aaa;
  padding:calc(54 * var(--u)) 0;
  font-size:calc(32 * var(--u));
  line-height:1.21875
}
.case-overview .stats{
  width:100%;
  margin:0;
  grid-template-columns:minmax(0,130fr) minmax(0,194fr);
  column-gap:calc(38 * var(--u));
  row-gap:calc(33 * var(--u))
}
.case-contributions{
  padding:calc(84 * var(--u)) 0 calc(177 * var(--u))
}
.case-contributions>h2{
  margin-bottom:calc(84 * var(--u))
}
.case-section{
  display:flex;
  flex-direction:column;
  align-items:flex-start
}
.case-section+.case-section{
  margin-top:calc(-51 * var(--u))
}
.case-card{
  width:67.1%;
  min-height:calc(859 * var(--u));
  padding:calc(24 * var(--u)) calc(98 * var(--u)) calc(40 * var(--u)) calc(46 * var(--u));
  border:calc(7 * var(--u)) solid transparent;
  border-radius:calc(10 * var(--u));
  background:linear-gradient(#000,#000) padding-box,linear-gradient(90deg,var(--border-highlight),var(--border)) border-box;
  font-size:calc(32 * var(--u));
  line-height:1.21875
}
.case-card h3{
  font-size:calc(64 * var(--u));
  line-height:1.21875;
  padding-bottom:calc(15 * var(--u));
  border-bottom:calc(3 * var(--u)) solid #aaa
}
.case-card p{
  padding-top:calc(15 * var(--u))
}
.case-card p+p{
  margin-top:calc(15 * var(--u));
  border-top:calc(3 * var(--u)) solid #aaa
}
.case-media{
  width:57.655%;
  aspect-ratio:708/459;
  margin-top:calc(-56 * var(--u));
  align-self:flex-end;
  position:relative;
  z-index:1
}
.case-section:first-of-type .case-media{
  margin-top:calc(-51 * var(--u))
}
.case-media .video,.case-image{
  width:100%;
  height:100%;
  aspect-ratio:708/459;
  border:calc(7 * var(--u)) solid var(--border);
  border-radius:calc(10 * var(--u));
  background:#000;
  object-fit:cover
}
.case-showreel{position:relative}
.showreel{position:absolute;top:calc(197 * var(--u));left:5.21%;width:89.58%;display:grid;grid-template-columns:90fr 886fr 90fr;gap:calc(17 * var(--u));align-items:center}
.showreel-images{aspect-ratio:886/575;min-width:0}
.showreel-images img{display:block;aspect-ratio:886/575}
.showreel [hidden]{display:none}
.showreel-button{width:100%;aspect-ratio:1;border:calc(5 * var(--u)) solid #9d0000;border-radius:50%;background:#000;color:#fff;display:grid;place-items:center;cursor:pointer;padding:20%}
.showreel-button svg{width:100%;height:auto}
.showreel-previous svg{transform:rotate(180deg)}
.showreel-button:hover{background:#572525}
.showreel-button:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media(max-width:700px){
  .case-showreel .case-card{min-height:0}
  .showreel{position:relative;top:auto;left:auto;width:100%;margin-top:18px;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px}
  .showreel-button{border-width:3px;min-height:44px}
}
.case-image[data-image-position="top"]{object-position:center top}
.case-page .case-image[role="button"],.case-hero:has(.portrait[role="button"]){cursor:zoom-in}
.case-page img[role="button"]:focus-visible{outline:3px solid white;outline-offset:4px}
.image-viewer-open{overflow:hidden}
.image-viewer{
  position:fixed;inset:0;margin:auto;padding:64px 24px 24px;
  width:100vw;height:100dvh;max-width:none;max-height:none;
  border:0;background:transparent;overflow:hidden
}
.image-viewer::backdrop{background:rgba(0,0,0,.82);backdrop-filter:blur(6px)}
.image-viewer[open]{display:flex;align-items:center;justify-content:center}
.image-viewer-image{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.image-viewer-close{position:absolute;right:16px;top:12px;width:44px;height:44px;border:1px solid #bd5151;border-radius:50%;background:#000;color:#fff;font:36px/1 Arial,sans-serif;cursor:pointer}
.image-viewer-close:focus-visible{outline:3px solid #fff;outline-offset:3px}
.case-image--contain{
  object-fit:contain
}
.case-image[data-image-position="bottom"]{
  object-position:center bottom
}
/* At narrower widths the overlapping desktop composition becomes a single flow. */
.case-hero--multiline h1{top:calc(193 * var(--u))}
.audio-panel,.case-placeholder{
  width:100%;height:100%;aspect-ratio:708/459;
  border:calc(7 * var(--u)) solid var(--border);
  border-radius:calc(10 * var(--u));background:#000
}
.case-placeholder{display:grid;place-items:center;padding:24px;text-align:center}
.audio-panel{display:flex;flex-direction:column;justify-content:space-between;padding:calc(80 * var(--u)) calc(60 * var(--u));gap:24px}
.audio-player{min-width:0;--audio-progress:0%}
.audio-custom:not([hidden]){display:flex;align-items:center;gap:calc(30 * var(--u))}
.audio-toggle{
  width:calc(90 * var(--u));height:calc(90 * var(--u));min-width:44px;min-height:44px;
  flex-shrink:0;border:calc(5 * var(--u)) solid #9d0000;border-radius:50%;
  background:#000;color:#fff;cursor:pointer;display:grid;place-items:center;padding:0
}
.audio-toggle svg{width:52%;height:52%;fill:currentColor}
.audio-toggle:focus-visible{outline:3px solid white;outline-offset:5px}
.audio-toggle:hover{border-color:var(--border-highlight)}
.pause-symbol,.is-playing .play-symbol{display:none}
.is-playing .pause-symbol{display:block}
.audio-wave{position:relative;flex:1;min-width:0;height:calc(64 * var(--u));color:#fff}
.audio-wave svg{display:block;width:100%;height:100%}
.audio-wave-played{position:absolute;inset:0;color:var(--border-highlight);clip-path:inset(0 calc(100% - var(--audio-progress)) 0 0)}
.audio-time{font-size:max(12px,calc(20 * var(--u)));white-space:nowrap;font-variant-numeric:tabular-nums}
.audio-error{font-size:14px;line-height:1.4;margin-top:8px;color:#fff}
.audio-player audio{max-width:100%}
@media(max-width:900px){
  .case-card,.case-overview{
    font-size:max(16px,calc(32 * var(--u)))
  }
  .about-copy{
    font-size:max(16px,calc(32 * var(--u)))
  }
  .skill-card ul{
    font-size:16px
  }
  .contact-links a{
    font-size:18px
  }
  .site-header{
    font-size:16px;
    flex-wrap:wrap;
    gap:8px 20px;
    padding:16px 5%
  }
  .site-header nav{
    gap:24px
  }
  .content{
    width:88%
  }
  .intro p{
    font-size:clamp(18px,2.78vw,25px)
  }
  .project-copy{
    font-size:clamp(16px,2.22vw,20px)
  }
  .small-project>p,.small-project .stats{
    font-size:16px
  }
  .small-project>p{
    min-height:0
  }
  .small-project{
    gap:12px
  }
  .small-project .stats{
    margin-top:20px
  }
  .project-panel{
    padding-right:calc(85 * var(--u))
  }
  .project-copy h3{
    font-size:clamp(26px,4.44vw,40px);
    white-space:normal
  }
  .stats{
    font-size:clamp(17px,2.78vw,25px)
  }
}
@media(max-width:700px){
  .case-hero--multiline h1{top:auto;bottom:43px;font-size:clamp(48px,10.5vw,72px);line-height:1.05}
  .audio-panel,.case-placeholder{border-width:3px;border-radius:6px}
  .audio-panel{padding:28px 16px;gap:32px;min-height:210px}
  .audio-custom:not([hidden]){gap:12px}
  .audio-toggle{width:48px;height:48px;border-width:3px}
  .audio-wave{height:40px}
  .audio-time{font-size:12px}
  .case-hero .portrait{
    height:100%
  }
  .case-trailer{
    width:100%;
    margin-top:36px
  }
  .case-trailer .video{
    aspect-ratio:16/9;
    border-radius:6px
  }
  .case-action{
    width:100%;
    min-height:0;
    margin:24px auto 36px
  }
  .case-overview{
    grid-template-columns:1fr;
    gap:24px;
    padding:28px 0;
    border-width:1px;
    font-size:18px;
    line-height:1.5
  }
  .case-overview .stats{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px 6px
  }
  .case-contributions{
    padding:36px 0 60px
  }
  .case-contributions>h2{
    margin-bottom:28px
  }
  .case-section+.case-section{
    margin-top:40px
  }
  .case-card{
    width:100%;
    min-height:0;
    padding:22px;
    border-width:3px;
    border-radius:6px;
    font-size:16px;
    line-height:1.5
  }
  .case-card h3{
    font-size:32px;
    padding-bottom:12px;
    border-width:1px
  }
  .case-card p+p{
    border-width:1px
  }
  .case-section .case-media,.case-section:first-of-type .case-media{
    width:100%;
    margin-top:18px
  }
  .case-media .video,.case-image{
    border-width:3px;
    border-radius:6px
  }
  .about-heading{
    height:210px
  }
  .about-heading h1{
    padding-top:35px;
    font-size:clamp(64px,15vw,100px)
  }
  .about-stories{
    padding:44px 0 60px;
    display:grid;
    gap:40px
  }
  .about-story,.about-story--reverse,.about-story:nth-child(3){
    display:flex;
    flex-direction:column;
    gap:18px;
    margin:0
  }
  .about-story .about-copy,.about-story:nth-child(3) .about-copy{
    margin:0;
    padding:22px;
    border-width:3px;
    border-radius:6px;
    font-size:18px;
    line-height:1.5
  }
  .about-story .about-photo{
    width:100%;
    max-width:400px;
    align-self:center;
    margin:0;
    border-width:3px;
    border-radius:6px;
    aspect-ratio:3/4
  }
  :root{
    --u:1px
  }
  .site-header{
    justify-content:center;
    padding:16px 20px 18px;
    gap:12px
  }
  .brand{
    width:100%;
    text-align:center
  }
  .site-header nav{
    justify-content:center;
    gap:28px
  }
  .hero{
    height:390px
  }
  .portrait{
    object-position:50% 45%
  }
  .hero h1{
    font-size:clamp(56px,13.89vw,96px);
    top:auto;
    bottom:43px;
    line-height:1.1
  }
  .role-ribbon{
    height:50px;
    font-size:32px;
    padding-right:9%
  }
  .hero-shade{
    inset:45% 0 0
  }
  .content{
    width:88%
  }
  h2{
    font-size:38px
  }
  .intro{
    padding:48px 0 40px;
    border-width:1px
  }
  .intro h2{
    margin-bottom:20px
  }
  .intro p{
    font-size:19px;
    line-height:1.45;
    letter-spacing:-.035em
  }
  .intro p+p{
    margin-top:24px
  }
  .featured{
    padding:40px 0 60px;
    border-width:1px
  }
  .featured>h2,.other>h2{
    margin-left:0;
    margin-bottom:30px
  }
  .featured-list{
    gap:64px
  }
  .featured-project{
    display:flex;
    flex-direction:column;
    min-height:0;
    gap:20px
  }
  .project-panel,.featured-project--reverse .project-panel{
    width:100%;
    min-height:0;
    border-width:3px;
    border-radius:6px;
    padding:22px 20px;
    gap:28px
  }
  .project-copy{
    font-size:16px;
    line-height:1.5
  }
  .project-copy h3{
    font-size:32px;
    line-height:1.2;
    padding-bottom:12px;
    border-width:1px;
    white-space:normal
  }
  .description{
    padding:14px 0;
    border-width:1px
  }
  .contributions{
    padding-top:14px
  }
  .contributions ul{
    padding-left:22px
  }
  .read-more{
    font-size:20px;
    padding:12px;
    border-radius:5px
  }
  .project-media,.featured-project--reverse .project-media{
    width:100%;
    padding:0;
    margin:0
  }
  .video,.video-placeholder{
    aspect-ratio:16/9;
    border-width:3px;
    border-radius:5px
  }
  .stats,.featured-project--reverse .stats{
    width:100%;
    margin:24px 0 0;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px 6px;
    font-size:14px
  }
  .stats li{
    gap:8px
  }
  .icon{
    width:52px;
    height:52px
  }
  .other{
    padding:44px 0 60px
  }
  .skills{
    padding:40px 0 64px;
    border-width:1px
  }
  .skills>h2{
    margin:0 0 30px
  }
  .skills-grid{
    grid-template-columns:1fr;
    gap:24px
  }
  .skill-card{
    min-height:0;
    border-width:3px;
    border-radius:6px;
    padding:20px
  }
  .skill-card h3{
    font-size:30px;
    padding-bottom:14px;
    border-width:1px
  }
  .skill-card ul{
    margin-top:16px;
    gap:12px;
    line-height:1.4
  }
  .site-footer{
    padding-bottom:28px
  }
  .contact-bar{
    min-height:58px;
    padding-inline:6%
  }
  .contact-links{
    width:88%;
    margin-top:24px;
    flex-wrap:wrap;
    gap:22px
  }
  .contact-links a{
    gap:16px
  }
  .other-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px 16px
  }
  .small-project{
    min-height:0;
    border-width:3px;
    border-radius:6px;
    padding:16px 12px;
    gap:10px
  }
  .small-project h3{
    font-size:26px
  }
  .small-project>p{
    font-size:16px;
    line-height:1.4
  }
  .project-thumbnail{
    border-radius:5px
  }
  .small-project .stats{
    grid-template-columns:1fr 1fr;
    font-size:14px;
    padding-top:12px;
    margin-top:auto
  }
  .small-project .icon{
    width:46px;
    height:46px
  }
}
@media(max-width:420px){
  .hero{
    height:340px
  }
  .other-grid{
    grid-template-columns:1fr;
    gap:24px
  }
  .small-project{
    padding:20px
  }
  .small-project h3{
    font-size:30px
  }
  .small-project .stats{
    justify-content:space-between
  }
  .small-project .icon{
    width:60px;
    height:60px
  }
  .stats{
    font-size:13px
  }
  .site-header nav{
    gap:24px
  }
}
@media(prefers-reduced-motion:reduce){
  *{
    transition:none!important
  }
}

/* Internship case studies: UI comparisons and portrait screen designs. */
.case-hero-gallery{overflow:hidden}
.hero-images{position:absolute;left:-4.653%;top:0;width:109.306%;height:calc(678 * var(--u));display:flex;z-index:-3}
.case-hero-gallery .portrait{position:relative;inset:auto;flex:0 0 21.474%;width:21.474%;height:100%;margin-right:-1.843%;border:0;object-position:top;z-index:auto}
.case-hero-gallery .portrait+.portrait{border-left:calc(7 * var(--u)) solid #9d0000}
.case-image[data-image-position="left"]{object-position:left center}
.case-hero-gallery .hero-shade,.case-hero-gallery h1,.case-hero-gallery .role-ribbon{pointer-events:none}
.case-internship .case-overview{margin-top:calc(84 * var(--u))}
.case-comparison{position:relative}
.case-comparison .case-card{width:74.59%}
.progression .case-card{width:76.22%}
.comparison-images .case-image{display:block}
.progression .comparison-images{display:grid;grid-template-columns:minmax(0,361fr) 50fr minmax(0,361fr) 50fr minmax(0,361fr);align-items:center;width:96.5%;margin-left:3.5%;margin-top:calc(-305 * var(--u));position:relative}
.progression .case-image{aspect-ratio:361/708;height:auto}
.comparison-arrow{color:var(--border-highlight);font-size:calc(64 * var(--u));line-height:1;text-align:center}
.case-section.tall-comparison{margin-top:calc(156 * var(--u));min-height:calc(1523 * var(--u))}
.tall-comparison .comparison-images{display:contents}
.tall-comparison .case-image:first-child{position:absolute;left:3.5%;top:calc(808 * var(--u));width:62.87%;height:calc(500 * var(--u));aspect-ratio:auto}
.tall-comparison .case-image:last-child{position:absolute;right:0;top:calc(-58 * var(--u));width:29.4%;height:calc(1581 * var(--u));aspect-ratio:auto}
.finance-comparison .case-image:last-child{right:calc(3 * var(--u))}
.tall-comparison .case-image--width:first-child{height:auto;aspect-ratio:auto}
.case-section.shop-comparison{margin-top:calc(161 * var(--u));min-height:calc(1589 * var(--u))}
.shop-comparison .case-image:first-child{left:21.66%;top:calc(775 * var(--u));width:30.62%;height:calc(664 * var(--u))}
.shop-comparison .case-image:last-child{top:calc(-40 * var(--u));height:calc(1629 * var(--u))}
.shop-comparison .comparison-arrow{position:absolute;left:52.28%;width:18.32%;top:calc(817 * var(--u))}
@media(max-width:700px){
  .hero-images{height:100%}
  .case-hero-gallery .portrait+.portrait{border-left-width:2px}
  .case-internship .case-overview{margin-top:36px}
  .case-comparison .case-card{width:100%}
  .case-section.tall-comparison,.case-section.shop-comparison{margin-top:40px;min-height:0}
  .progression .comparison-images,.tall-comparison .comparison-images{display:flex;flex-direction:column;gap:18px;width:100%;margin:18px 0 0}
  .case-comparison .comparison-images .case-image{position:static;width:100%;height:auto;aspect-ratio:auto}
  .comparison-arrow,.shop-comparison .comparison-arrow{position:static;width:auto;font-size:40px;transform:rotate(90deg)}
}