/* Readymag homepage composition, measured at 1440px. Finam case remains on styles.css. */
:root{
  --background:#f9f9fa;
  --primary:rgba(0,0,0,.82);
  --secondary:rgba(0,0,0,.75);
  --surface:#e8ebf1;
  --home-card:#e8ebf1;
}
body{overflow-x:clip}
.portfolio-home-shell{overflow-x:clip}
/* Keep the home navigation symbol fixed and positioned exactly as in Finam. */
.home-header{position:fixed;inset:0 auto auto 0;z-index:60;width:0;height:0;pointer-events:none}
.home-mark{
  position:fixed;top:15px;left:max(18px,calc((100vw - 1440px)/2 + 20px));
  display:flex;align-items:center;justify-content:center;width:62px;height:60px;
  font:400 67px/1 var(--font-body);color:rgba(0,0,0,.75);
  text-decoration:none;pointer-events:auto;transform-origin:50% 50%;
}
.home-mark:hover{animation:star-reference-spin 10s linear infinite}
@keyframes star-reference-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.home-mark:focus-visible,.home-project__link:focus-visible{outline:2px solid #222;outline-offset:4px}
.home-intro{padding-top:72px;padding-bottom:104px}
.home-intro h1.portfolio-display{
  font:700 50px/60px var(--font-heading);letter-spacing:0;
  width:min(100%,756px);max-width:756px;color:rgba(0,0,0,.82);
}
.home-intro p.portfolio-body{
  margin-top:26px;width:min(100%,1054px);max-width:1054px;
  font:400 18px/26px var(--font-body);color:rgba(0,0,0,.75);
}
.home-work{padding-bottom:94px}
.home-project{
  position:relative;width:100%;height:328px;margin:0 0 50px;
  background:var(--home-card);border:0;border-radius:10px;
  overflow:hidden;isolation:isolate;
}
.home-project:not(:first-child){margin-bottom:52px}
.home-project:last-child{margin-bottom:0}
.home-project__link{display:block;position:relative;width:100%;height:100%;color:inherit}
.home-project__media{position:absolute;inset:0;pointer-events:none}
.home-project__shot{
  position:absolute;display:block;width:24.132492%;height:auto;max-width:none;
  object-fit:contain;z-index:1;border-radius:5px;
  filter:drop-shadow(0 12px 16px rgba(0,0,0,.1));
  transition:transform 500ms ease,opacity 500ms ease;
  transform-origin:center center;
}
.home-project__shot--second{z-index:2}
#beeline-family .home-project__shot--first,#alfaforex .home-project__shot--first,#finam .home-project__shot--first{z-index:3}
.home-project--left .home-project__shot--first{left:8.438486%;top:44px}
.home-project--left .home-project__shot--second{left:24.921136%;top:69px}
.home-project--right .home-project__shot--first{left:67.429022%;top:46px}
.home-project--right .home-project__shot--second{left:50.946372%;top:71px}
#equilibrium .home-project__shot--first{top:52px}
#equilibrium .home-project__shot--second{top:96px}
#finam .home-project__shot{
  height:217px;width:24.132492%;object-fit:cover;object-position:top center;
  background:#212228;
}
.home-project__copy{
  position:absolute;top:52px;width:32.097792%;color:rgba(0,0,0,.95);
}
.home-project--left .home-project__copy{right:8.438486%}
.home-project--right .home-project__copy{left:8.438486%}
.home-project__copy h2{
  font:700 18px/26px var(--font-heading);letter-spacing:0;
  text-transform:lowercase;color:rgba(0,0,0,.95);
  padding:0 0 13px;margin:0;
}
.home-project__copy p{
  font:400 18px/26px var(--font-heading);letter-spacing:0;
  color:rgba(0,0,0,.75);margin:0;
}
.home-tags{
  position:absolute;top:158px;left:0;width:100%;
  display:flex;flex-wrap:wrap;align-content:flex-start;gap:10px;
  list-style:none;margin:0;padding:0;
}
.home-tags li{
  display:flex;align-items:center;justify-content:center;
  min-height:28px;padding:0 11px;
  font:400 14px/28px var(--font-body);white-space:nowrap;
  color:rgba(0,0,0,.75);background:#fff;border-radius:100px;
}
@media(hover:hover){
  .home-project--left:hover .home-project__shot--first,
  .home-project--right:hover .home-project__shot--second{transform:translateY(20px)}
  .home-project--left:hover .home-project__shot--second,
  .home-project--right:hover .home-project__shot--first{transform:translateY(-20px)}
  .home-project:hover .home-project__copy h2{color:#333}
  .home-project:hover .home-tags li{opacity:.88}
}
@media(max-width:1150px) and (min-width:768px){
  .home-intro{padding-top:80px;padding-bottom:85px}
  .home-intro h1.portfolio-display{font-size:clamp(37px,4.2vw,50px);line-height:1.2}
  .home-intro p.portfolio-body{font-size:17px;line-height:1.5}
  .home-project__copy{width:35%}
  .home-project__copy h2,.home-project__copy p{font-size:clamp(14px,1.6vw,18px);line-height:1.43}
  .home-project__copy h2{padding-bottom:10px}
  .home-tags{top:158px;gap:7px}
  .home-tags li{font-size:12px;line-height:25px;min-height:25px;padding-inline:9px}
}
@media(max-width:767px){
  :root{--pad:6.25vw}
  .home-mark{top:4.375vw;left:2.5vw;width:7.5vw;height:8.125vw;font-size:8.125vw;line-height:1}
  .home-intro{padding-top:118px;padding-bottom:66px}
  .home-intro h1.portfolio-display{width:100%;font-size:clamp(27px,7.25vw,36px);line-height:1.24}
  .home-intro p.portfolio-body{margin-top:24px;font-size:16px;line-height:1.52}
  .home-work{padding-bottom:75px}
  .home-project{height:auto;min-height:0;margin-bottom:26px;overflow:hidden}
  .home-project:not(:first-child){margin-bottom:26px}
  .home-project__link{display:flex;flex-direction:column;height:auto}
  .home-project__media{position:relative;inset:auto;height:clamp(185px,56vw,248px);flex:none;width:100%}
  .home-project__shot{width:64%;max-width:none;filter:drop-shadow(0 8px 12px rgba(0,0,0,.1))}
  .home-project--left .home-project__shot--first{left:8%;top:20px}
  .home-project--left .home-project__shot--second{left:35%;top:40px}
  .home-project--right .home-project__shot--first{left:35%;top:20px}
  .home-project--right .home-project__shot--second{left:8%;top:40px}
  #equilibrium .home-project__shot--first{top:23px}
  #equilibrium .home-project__shot--second{top:47px}
  #finam .home-project__shot{width:64%;height:min(43vw,178px)}
  .home-project__copy{position:relative;top:auto;left:auto!important;right:auto!important;width:100%;padding:0 22px 28px}
  .home-project__copy h2{font-size:16px;line-height:24px;padding-bottom:10px}
  .home-project__copy p{font-size:16px;line-height:24px}
  .home-tags{position:static;top:auto;left:auto;width:auto;margin-top:28px;gap:8px}
  .home-tags li{font-size:12px;min-height:26px;line-height:26px;padding:0 10px}
}
@media(max-width:375px){
  .home-mark{left:10px}
}
@media(prefers-reduced-motion:reduce){
  .home-mark:hover{animation:none}
  .home-project__shot{transition:none!important}
  .home-project:hover .home-project__shot{transform:none!important}
  .home-motion .home-project:not(.is-visible) .home-project__shot{opacity:1!important;transform:none!important}
}
.home-motion .home-project:not(.is-visible) .home-project__shot{opacity:0;transform:translateY(14px)}
.home-motion .home-project.is-visible .home-project__shot{opacity:1}